HTML块级元素水平居中

1.元素未水平居中的情况

  <div>
    <el-card class="box-card" style="width: 1500px;">
      <div v-for="o in 4" :key="o" class="text item">
        {{'列表内容 ' + o }}
      </div>
    </el-card>
    <el-card class="box-card" style="width: 800px; margin-top: 50px;">
      <div v-for="o in 4" :key="o" class="text item">
        {{'列表内容 ' + o }}
      </div>
    </el-card>
  </div>

效果图:

2.元素水平居中的解决办法

1. 父容器添加样式style=“text-align: center;”(使文字水平居中, 不需要文字居中可不写)
2. 子元素添加样式style=“margin-left: auto; margin-right: auto;”(使块元素水平居中)

 <div style="text-align: center;">
    <el-card class="box-card" style="width: 1500px; margin-left: auto; margin-right: auto;">
      <div v-for="o in 4" :key="o" class="text item">
        {{'列表内容 ' + o }}
      </div>
    </el-card>
    <el-card class="box-card" style="width: 800px; margin-top: 50px; margin-left: auto; margin-right: auto;">
      <div v-for="o in 4" :key="o" class="text item">
        {{'列表内容 ' + o }}
      </div>
    </el-card>
  </div>

效果图:

3.想要使文字(或某子元素)是居左的

• 文字(或某子元素)所在元素设置样式style=“text-align: left;” , 这样就可以去除从父元素继承下来的元素居中效果.

 <div style="text-align: center;">
    <el-card class="box-card" style="width: 1500px; margin-left: auto; margin-right: auto;">
      <div v-for="o in 4" :key="o" class="text item" style="text-align: left;">
        {{'列表内容 ' + o }}
      </div>
    </el-card>
    <el-card class="box-card" style="width: 800px; margin-top: 50px; margin-left: auto; margin-right: auto; text-align: left;">
      <div v-for="o in 4" :key="o" class="text item" style="">
        {{'列表内容 ' + o }}
      </div>
      <el-button type="danger">普通按钮</el-button>
    </el-card>
  </div>

效果图: