时间戳

首页 > 解决方案 > 居中文本在全屏浏览器中有效，但在调整大小或在手机视图中时，它会扰乱外观，如小提琴所示

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

问题描述

好的初学者在这里 - 无论屏幕尺寸如何，都试图让这个网站看起来不错。

这是无论屏幕大小都可以使用的网站页面： https ://jsfiddle.net/garixakor/j0xck25v/1/

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

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

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

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

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

标签： htmlcssmedia-queriesmargincentering

解决方案

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

通过设置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%;
}

推荐阅读