如何调整文字的宽度并将其放在文章中心（Visual）编辑器中？

Question

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

---

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

我正在使用AndersNorén的Hemingway主题。

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

简而言之，我的目标是使整个“编辑帖子”网页看起来像一个脱机文字处理程序：

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

我该如何做＃2和＃3？

谢谢。

编辑：只是为了澄清一下：我想改变可视化编辑器的外观-仅可视化编辑器，而不是实时网站显示的任何输出。

---

编辑2：

我可以复制BalázsVarga所显示的内容，但是（很抱歉，我应该早一点说一下），在我将代码保存在“其他CSS”上后，它不起作用。 （并且清除了所有缓存之后。）我使用了ID #tinymce。

我的浏览器（Firefox开发人员）在检查器中实时显示更改，但在保存其他CSS之后却不会显示。我认为这很奇怪，而且我认为我可以很好地处理CSS：我网站上的主题海明威看起来不再像原始的海明威，但是所有更改都只能通过附加CSS进行。

在Google上进行的搜索显示我可能需要编辑“ functions.php”（？），但我现在不知道它的工作方式，我认为在2019年可能会有另一种方式。我避免编辑“这样的复杂的事情（对我而言），除非Wordpress令我很难破解事情，例如使用“附加CSS”。

在检查器上，我可以使用以下方法解决该问题：

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

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

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