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

Question

I've got three DIV s that I've put into a container DIV .

What I want is as follows:

Here's where I'm up to:

 #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> 

Please can someone help tell me where I'm going wrong?

Thanks! Scott

Answer 1

set the div the contains the three small divs display:flex and give it 75% width of the container, then set space around the content as follow:

 #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> 

Answer 2

Here's how I would do it.

Give each .leftdiv (indeed this should be a class, id's are unique) 33% of total viewport width:

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

and center each paragraph inside these divs, give it 75% width:

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

This is a cleaner solution, as you'll notice there is no horizontal scroll present.

Here is a codepen.

Also, you need to clear your parent div #leftdivcontainer (did that as well).

Hope this helps.