3个DIV，1个容器，水平居中对齐

我有三个DIV，我已将其放入容器DIV。3个DIV，1个容器，水平居中对齐

我想如下：

Demo image

这里就是我离开的时候了：

#light-table { 
 
    background-color: #e2e2e2; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
} 
 
#leftdiv { 
 
    float: left; 
 
    padding: 0 20px; 
 
    /*margin:20px 0;*/ 
 
    position: relative; 
 
    width: 25%; 
 
    flex-basis: 25%; 
 
} 
 
#leftdivcontainer { 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
#light-table-paragraph { 
 
    font-family: 'Droid Serif'; 
 
    font-size: 20px; 
 
    color: #2e2e2e; 
 
    text-align: left; 
 
    line-height: 40px; 
 
}

<div id="light-table"> 
 
    <h3 id="light-table-head-style">content.</h3> 
 
    <div id="leftdivcontainer"> 
 
    <div id="leftdiv"> 
 
     <p id="light-table-paragraph">Left</p> 
 
    </div> 
 
    <div id="leftdiv"> 
 
     <p id="light-table-paragraph">Middle</p> 
 
    </div> 
 
    <div id="leftdiv"> 
 
     <p id="light-table-paragraph">Right</p> 
 
    </div> 
 
    </div> 
 
</div>

可以请别人帮忙告诉我在哪里”错了吗？

谢谢！斯科特

来源

2017-02-10 Scott Davies

嘿@Scott Davies - 对于初学者来说，在你的CSS中用'class'代替'id'，在CSS中代替'''为那些你有多个元素的'''，所以'light-table-段落'和'leftdiv' –

谢谢，我会修改使用情况。你能告诉我这是新来的吗？哈哈。 –

你必须从某处开始:)祝你好运！ –

这里是如何我会做。

给每个.leftdiv（事实上这应该是一个类，ID是唯一的）总视口宽度的33％：

.leftdiv { 
    float: left; 
    width: 33%; 
}

和中心这些div内的每个段落，给它75％的宽度：

.leftdiv p { 
    display: block; 
    width: 75%; 
    margin: 0 auto !important; /* you won't need !important if your code is well structured */ 
}

这是一个更清洁的解决方案，因为您会注意到不存在水平滚动。

Here是一个codepen。

此外，你需要清除你的父母div #leftdivcontainer（做到这一点）。

希望这会有所帮助。

来源

2017-02-10 16:09:42

非常感谢，这工作的魅力。我很感激！ –

酷，@ScottDavies，很高兴我可以帮忙！你认为接受的答案会更好吗？不要忘记在项目生效后分享这个项目。 ;） –

也许我错误地接受了一个答案 - 我是新来的论坛，所以我upvoted几件事情，因为人们花时间从他们的生活中帮助我:) 它住在http：//scott.ewarena。 com/blog，但它仍然是一项工作:) –

设定div中包含了三个小的div display:flex，并给它容器的75％的宽度，周围的内容如下然后设置空间：

#leftdiv { 
 
    /*float: left;*/ 
 
    padding:0 20px; 
 
    /*margin:20px 0;*/ 
 
    position:relative; 
 
    /* edits */ 
 
    width:33.33%; 
 
    flex-basis: 25%; 
 
} 
 

 
#leftdivcontainer { 
 
    vertical-align:middle; 
 
    text-align: center; 
 
    /* edits */ 
 
    width:75%; 
 
    display: flex; 
 
    margin: 0px auto; 
 
    justify-content: space-around; 
 
} 
 

 
#light-table-paragraph { 
 
    font-family: 'Droid Serif'; 
 
    font-size: 20px; 
 
    color: #2e2e2e; 
 
    text-align: left; 
 
    line-height:40px; 
 
} 
 

 
#light-table { 
 
    background-color: #e2e2e2; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top:30px; 
 
    margin-bottom: 30px; 
 
}

<div id="light-table"> 
 
    <h3 id="light-table-head-style">content.</h3> 
 
    <div id="leftdivcontainer"> 
 
    <div id="leftdiv"><p id="light-table-paragraph">Left</p></div> 
 
    <div id="leftdiv"><p id="light-table-paragraph">Middle</p></div> 
 
    <div id="leftdiv"><p id="light-table-paragraph">Right</p></div> 
 
    </div> 
 
    </div>

来源

2017-02-10 15:43:30 Mohammad

是的，只是想说:)添加'display：flex; justify-content：space-around;'到容器:) @Scott，也修复重复的'id's。 –

3个DIV，1个容器，水平居中对齐

回答

相关问题