CSS将两个文本部分对齐居中(水平)

时间:2017-07-20 17:59:51

标签: html css

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

图片 - [1]:http://imgur.com/tRhUBox

3 个答案:

答案 0 :(得分:2)

首先,您需要为两个文本部分或最小宽度设置两列(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

答案 1 :(得分:1)

使用css中的类进行测试:

.myClass{ text-align: center; }

或使用HTML中心标记。

答案 2 :(得分:0)

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

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

所以它将对齐中心..