时间戳

首页 > 解决方案 > 如何使另一个 div 元素中的多个 div 元素水平居中？

html - 如何使另一个 div 元素中的多个 div 元素水平居中？

问题描述

我想让我的 div 元素在同一行居中。我希望它在不使用固定边距的情况下完成，因为一旦您调整它的大小或更改屏幕分辨率，它就不起作用。

我试过使用“margin：0 auto”，但这似乎不起作用。我也尝试过一些不同的事情，但老实说，他们只是我在黑暗中踢球。

的HTML：

  <div class="container div3">
    <div class="sredina">

    <div class="box">
      <img>
      <h3></h3>
      <p></p>
    </div>


    <div class="box">
      <img>
      <h3></h3>
      <p></p>
    </div>


    <div class="box">
      <img>
      <h3></h3>
      <p></p>
    </div>

</div>

CSS：

.box{
  text-align: center;
  width: 20%;
  border: 2px solid blue;
  margin: 1pt;
  float: left;}

.div3{
  text-align: center;}

.sredina{
  display: inline-block;
  margin: auto;
  border: 2px solid red;}

.container{
  width: 80%;
  margin: auto;
  overflow: hidden;
}

现在的样子：现在 的样子

我希望它看起来 如何：它应该看起来如何的图像

标签： htmlcss

解决方案

尝试flex用于您的.sredina

https://codepen.io/anon/pen/zXbxym

.sredina{
  display: flex;
  justify-content: center;
  align-items: strentch;
  margin: auto;
  border: 2px solid red;
}

推荐阅读