文本对齐的媒体查询：中心

Posted 2023-03-05

【中文标题】文本对齐的媒体查询：中心

【英文标题】：Media Query for text-align: center

【发布时间】：2015-09-14 06:57:10

【问题描述】：

我在使用媒体查询时遇到了一些问题。我正在尝试仅将移动设备的文本居中。我已将以下内容添加到我的 CSS 中，但它似乎并没有起到作用。任何帮助将非常感激。谢谢！

@media only screen and (max-width:500px).category-compare text-align:center;

【参考方案1】：

确保您的嵌套是正确的。媒体查询非常迂腐。

检查您的代码以了解 .category-compare 上以前的 text-align 规则并检查它是如何嵌套的，即：.main-content .left-side .category-compare。如果它是这样嵌套的，您将需要对您的媒体查询进行相同的嵌套。

【讨论】：

感谢您的回复马克，非常感谢。不幸的是，我没有 .category-compare 的任何其他代码 - 这是我的第一个条目。

我撒谎。我的 Google 字体控制 CSS 如下： .category-compare font-family: 'Source Sans Pro';字体大小：40px；字体样式：正常；字体粗细：300；字母间距：-1px；行高：0.8;

.category-compare是什么类型的元素，即：div、span等

这是一个跨度标记。我也尝试了以下方法，但没有成功：@media only screen and (max-width:500px)span.category-compare text-align:center;

这就是为什么，span 元素没有全宽，它的宽度实际上是其内容的宽度，所以居中文本不会有任何好处，应用 @987654325 的规则@给它，如果这搞砸了你的设计，试试display: inline-block

【参考方案2】：

请将text-align:center; 替换为text-align:center !important;。这是强制文本对齐属性。