html - 如何调整文本宽度并将其放在帖子(视觉)编辑器的中心？

Question

编辑 3:我想这已经解决了。我刚刚启用了古腾堡编辑器并发现了它的“经典编辑器”部分，即代码编辑器。我唯一需要习惯的是我无法轻易修改的编辑器行高，这还不错。这对我有用，它超过了修改 functions.php 或其他类似的复杂东西(对我来说)的需要。谢谢。

---

[免责声明:我不是任何类型的开发人员，但愿意花时间。 (可以做一些 CSS。)另外，这个论坛是新来的。]

我正在使用 Anders Norén 的海明威主题。

我还没有尝试创建子主题，我不确定是否需要一个解决方案。

简而言之，我的目标是让整个“编辑帖子”网页看起来像一个离线文字处理器:

1. 让可视化编辑器占据整个屏幕。 (我用的是经典编辑器。)(完成:折叠左侧的垂直菜单，选择 1 列布局，并禁用“全高编辑器和无干扰功能。”)
2. 设置文字的宽度(因为目前文字几乎都是从边缘到屏幕边缘)
3. 将文本置于中心(但“左对齐”，而不是“对齐”)。这用于帖子编辑器中的“左右边距”。

我该怎么做 #2 和 #3？

谢谢。

编辑:澄清一下:我希望更改可视化编辑器的外观——仅更改可视化编辑器，而不是实时网站显示的任何输出。

---

编辑 2:

我可以复制 Balázs Varga 展示的内容，但是(很抱歉我早该这么说)在我将代码保存到“Additional CSS”后它不起作用。 (并且在清除所有缓存之后。)我使用了 ID #tinymce。

我的浏览器 (Firefox Developer) 在我摆弄 Inspector 时会实时显示更改，但在我保存额外的 CSS 后不会显示。这很奇怪，我认为，我认为我可以很好地处理 CSS:我网站上的海明威主题看起来不再像原来的海明威了，但所有更改都是通过附加 CSS 进行的。

谷歌搜索显示我可能需要编辑“functions.php”(？)，但我现在不知道它是如何工作的，我认为 2019 年可能会有另一种方式。我避免编辑“复杂”之类的东西(对我来说)，除非 Wordpress 让我很难打破东西，例如“附加 CSS”。

在 Inspector 上，我可以用这样的方法解决它:

#tinymce {
    margin-left: 300px;
    margin-right: 300px;
} 

我想知道为什么这还不是可视化编辑器的“功能”。真的很好。它可以消除对文字处理器或第三方编辑器的需求(至少对于像我这样的“纯文字”作家而言)。

Answer 1

您可以在浏览器中检查该元素，因此您可以看到它是一个带有 id content_ifr 的 tinymce iframe。

如果你想以像素为单位设置宽度，你可以这样做:

#content_ifr {
    position: relative;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 0);
}

left:50% 与 position:relative 一起会将元素水平推到中心。但是它会将左侧推到中心，所以你还需要将水平 transform 设置为 -50%，这样它就会被拉回到正确的位置(因为 transforms 中的百分比是从元素本身，而不是像 left 那样来自它的父元素)

你应该看到这样的东西:

如果您想以百分比设置宽度，您可以简单地应用 margin-left 使元素居中:

#content_ifr {
    width: 80%;
    margin-left: 10%; // set this value to: (100 - width) / 2
}

编辑

您还可以编辑 functions.php 以将您的样式附加到页面，例如在页眉区域使用 admin_head Hook :

function hook_css() {
?>
    <style>
    #content_ifr {
        position: relative;
        max-width: 600px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    </style>
<?php
}
add_action('admin_head', 'hook_css');