平板电脑和手机：在中间对齐内容

【问题标题】：Tablet and Mobile: align content in the middle平板电脑和手机：在中间对齐内容
【发布时间】：2016-01-19 17:38:31
【问题描述】：

我在这个网站上工作http://sg.nowcommu.myhostpoint.ch/，我只需要在平板电脑和智能手机上对齐中间的内容。

这就是它在 iPad 上的样子，例如 enter image description here

【问题讨论】：

【解决方案1】：

使用媒体 css 语句，例如 @media only screen and (max-device-width: 769px){} 然后将相关项目添加到其中，例如

.text-r,.text-l{text-align:center}

您可能还需要通过添加以下一些内容来覆盖您的其他 css 语句，如果需要，请记住使用 !important

float: none;
width: 100%;

【讨论】：

【解决方案2】：

您正在使用两个类来对齐内容 left 和 right .text-r 和 .text-l 只需将这两个类的对齐方式更改为小于或等于 768px：

@media all and (max-width: 768px) {
  .text-r,.text-l {
      text-align: center;
  }
}

【讨论】：