平板电脑和移动设备：在中间对齐内容

Question

我正在使用这个网站http://sg.nowcommu.myhostpoint.ch/，而我只需要在平板电脑和智能手机上调整中间内容。

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

Answer 1

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

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

您还可能需要通过添加以下几项来覆盖其他css语句，如果需要，请记得使用!important

float: none;
width: 100%;

Answer 2

您使用两个类来对齐内容左和正确 .text-r和.text-l只需将这两个类的对齐方式更改为居中屏幕小于或等于768px：

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