Question

通常，当我需要对齐3个div时，我会选择这个解决方案：

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

但在这种情况下，我不想这样做。现在我有一个类.medew，我需要在容器中显示三次。这三个应该在中心对齐。我已经尝试过我所知道的，但我的知识让我再次失望。

这是我目前正在使用的CSS：

.medew {
    background-repeat: no-repeat;
    background-color: #D3D3D3;
    background-position: 5px 0px;
    color: #313131;
    margin: 5px 0 5px 8px;
    padding: 10px 10px 10px 40px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0px 3px 0px #B2B2B2;
    font-size: 12px;
    width: 150px;
    min-height: 45px;
    display: inline-block;
    margin: 0 auto;
}

有没有办法让三个div水平对齐并居中在父容器中？

Answer 1

只需将父容器置于margin: 0 auto中心，并将所有三个内部容器设置为display: inline-block一定宽度！

CSS

.parent {
margin:0 auto;
text-align:center;
}

.inner {
background-color: #D3D3D3;
width: 150px;
min-height: 45px;
display: inline-block;
}

HTML

<div class="container">
   <div class="inner"></div>
   <div class="inner"></div>
   <div class="inner"></div>
</div>

当然，您可以使用所有其他CSS样式选项！

Answer 2

另一种方法可能是使用这样的flexbox：Demo

<div class="container">
    <div class="medew"></div>
    <div class="medew"></div>
    <div class="medew"></div>
</div>

.medew {
    background-repeat: no-repeat;
    background-color: #D3D3D3;
    background-position: 5px 0px;
    color: #313131;
    margin: 5px 0 5px 8px;
    padding: 10px 10px 10px 40px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0px 3px 0px #B2B2B2;
    font-size: 12px;
    width: 150px;
    min-height: 45px;
    display: inline-block;
    margin: 0 auto;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

Answer 3

请尝试以下操作： Demo

.container {
    margin:0 auto;
    text-align:center;
    display:block;
}
.medew {
    background-repeat: no-repeat;
    background-color: #D3D3D3;       
    color: #313131;
    margin: 5px 0 5px 8px;
    padding: 10px 10px 10px 40px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0px 3px 0px #B2B2B2;
    font-size: 12px;
    width: 150px;
    min-height: 45px;
    display: inline-block;
    margin: 0 auto;
}

HTML：

<div class="container">
    <div class="medew"></div>
    <div class="medew"></div>
    <div class="medew"></div>
</div>

水平对齐＆amp;中心3等于div

3 个答案: