居中文本在全屏浏览器中有效，但在调整大小时或在 phone 视图中它会扰乱外观，如小提琴所示

Question

好的新手 - 无论屏幕尺寸如何，都试图让这个网站看起来不错。

这是无论屏幕尺寸如何都有效的网站页面： https://jsfiddle.net/garixakor/j0xck25v/1/

我试图将其中一个段落居中，以便它在桌面视图中看起来更好，但当我这样做时，文本不再适合 phone 大小或缩小桌面浏览器。

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 20em
}  

<p class="blocktext">Step back in time etc etc....

此更改显示在 fiddle 中： https://jsfiddle.net/garixakor/5Lo4rtkc/

我想知道是否使用如下媒体查询：如果屏幕尺寸为 992x 或更大，则可以应用居中，或者是否有其他解决方案，或者我是否需要找到一种围绕居中的方法方式。

Answer 1

尝试添加 max-width: 100%。如果屏幕宽度小于 20em，仅使用您的 width 值，文本容器将流出视口并且不换行文本。

通过将 max-width 设置为 100% 可以确保文本容器不能比父容器宽。

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 20em;
    max-width: 100%;
}

P.para {
    margin-left: auto;
    margin-right: auto;
    width: 70em;
    max-width: 100%;
}

居中文本在全屏浏览器中有效，但在调整大小时或在 phone 视图中它会扰乱外观，如小提琴所示

Centering text works in full screen browser but when resizing or in phone view it disturbs the look as shown in fiddles

html

css

media-queries

margin

centering