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個容器，水平居中對齊

回答

相關問題