如何调整文本宽度并将其放在帖子（可视）编辑器的中心？

Question

Edit 3：我想这已经解决了。我刚刚启用了 Gutenberg 编辑器并发现了它的“经典编辑器”部分，即代码编辑器。我唯一需要习惯的是编辑器的行高，我不能轻易修改，这还不错。这对我有用，它比修改functions.php或其他类似的复杂事情（对我来说）更重要。谢谢。

---

[免责声明：我不是任何类型的开发人员，但愿意花时间。 （可以做一点 CSS。）另外，这个论坛的新手。]

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

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

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

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

#2 和 #3 我该怎么做？

谢谢。

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

---

编辑 2：

我可以复制 Balázs Varga 展示的内容，但是（我很抱歉我应该早点说过）在我将代码保存在“附加 CSS”上后它就不起作用了。 （在清除所有缓存之后。）我使用了 ID #tinymce。

当我使用 Inspector 时，我的浏览器（Firefox 开发人员）会实时显示更改，但在我保存额外的 CSS 之后不会。我觉得这很奇怪，而且我认为我可以很好地处理 CSS：我网站上的 Hemingway 主题看起来不再像原来的 Hemingway，但所有更改都是通过 Additional CSS 进行的。

Google 上的搜索显示我可能需要编辑“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%，以便将其拉回正确的位置（因为变换中的百分比是从元素本身的大小计算的，而不是来自它的父母，就像left 一样）

您应该会看到如下内容：

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

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

编辑

您还可以编辑您的functions.php 以将您的样式附加到页面，例如在带有admin_head 挂钩的标题区域中：

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');