如果屏幕小于 768 像素，则将文本居中对齐答案

【问题标题】：Aligning text to center if screen is smaller then 768px如果屏幕小于 768 像素，则将文本居中对齐
【发布时间】：2017-03-16 11:06:54
【问题描述】：

我有一个文本居中的容器。在容器内，我有一个面板，其文本设置为左侧，但是当屏幕变小后，平板电脑变成了手机之类的东西，我希望面板中的文本居中。

这是我正在做的事情，但不确定媒体查询是如何工作的，这对我不起作用。

这个媒体查询是我正在使用的，但是 hte html 要复杂得多，但作为一个示例进行了简化

@@media all and (min-width:768px) {
  .text-left {
    text-align: center;
  }
}

<div class="container text-center">
  <div class="row">
    <div class="panel panel-default text-left">
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

【问题讨论】：

min-width: 768px 表示如果屏幕的最小宽度为 768px，则代码将执行。这是针对更大的屏幕。如果您希望代码在小于 768 像素的屏幕上执行，请使用 max-width。换句话说，max-width: 768px 说：如果屏幕的宽度最大为 768px，则运行代码。
好的，我刚刚尝试过，但是当我将屏幕最小化到 768 以下时，它仍然无法与中心对齐。
text-align 适用于内联内容。您正在尝试将div 居中。试试这个：margin: 0 auto.
class="container text-center" class="row"> class="panel panel-default text-left" 和 class="panel-body" 的 css 是什么
css 全部来自 bootstrap

标签： html css twitter-bootstrap media-queries

【解决方案1】：

您的媒体查询正应用于任何min-width 为 768 像素（即大于或等于 768 像素）的事物。既然你想要的少，你需要把它改成max-width。

@media(max-width:767px) {
  .text-left {
    text-align: center;
  }
}

<div class="container text-center">
  <div class="row">
    <div class="panel panel-default text-left">
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

【讨论】：