Question

图像显示问题所在，我已经为这部分宽度（移动版本）编写了媒体查询，但似乎无法在图像中心正确对齐我的两个部分文本。

Answer 1

首先，您需要为两个文本部分或最小宽度设置两列（50％宽度），然后您可以水平居中。

.right {
    text-align: center;
    width: 50%;
    float: right;

}
.left {
    text-align: center;
    width: 50%;
    float: left;
}


<div class="right">
  <p>This text is centered.</p>
</div>
<div class="left">
  <p>This text is centered.</p>
</div>

----在Bootstrap ----中

  <style>
  .text1{
  text-align: center;
  }
  </style>

  <div class="row">
    <div class="col-xs-6" style="background-color:lavender;">
    <div class="text1">
    left side data.
    </div>
    </div>
    <div class="col-xs-6" style="background-color:lavenderblush;">
    <div class="text1">
    left side data.
    </div>
    </div>
  </div>

enter image description here

Answer 2

使用css中的类进行测试：

.myClass{ text-align: center; }

或使用HTML中心标记。

Answer 3

在您的媒体查询中，您设置了我认为的宽度..那么您要做的就是让它们居中只是添加自动边距..

.box{
    display:block;
    width:250px;
    float: none;
    margin-left : auto;
    margin-right:auto;
  }

所以它将对齐中心..

CSS将两个文本部分对齐居中（水平）

3 个答案: