html - Align divs on one line and center horizontally -

html - Align divs on one line and center horizontally -

all 3 boxes (box1,box2 , box3) should on same line , aligned center.

here jsfiddle of below:

class="snippet-code-css lang-css prettyprint-override">#wrapper { background-color: lightcyan; } #container1 { border: 2px dashed magenta; } #box1, #box2, #box3 { height: 100px; width: 100px; postition: fixed; } #box1 { border: 1px solid red; float: left; } #box2 { border: 1px solid green; float: left; } #box3 { border: 1px solid brown; } class="snippet-code-html lang-html prettyprint-override"><div id="wrapper"> <div id="container1"> <div id="box1"> <p>box 1</p> </div> <div id="box2"> <p>box 2</p> </div> <div id="box3"> <p>box 3</p> </div> </div> </div>

try this.

see demo here

html

<div id="main"> <div id="container"> <div id="box1"> <p>box 1</p> </div> <div id="box2"> <p>box 2</p> </div> <div id="box3"> <p>box 3</p> </div> </div> </div>

css

#main{ background-color: lightpink; overflow: auto; padding:15px; } #container{ border: 1px solid grey; width: 304px; margin: 0 auto; padding:5px; } #container:after{ content: ''; clear:both; display: table; } #box1,#box2,#box3{ height:100px; width: 100px; float: left; border:1px solid red; } #box2{ border-right: none; border-left: none; } p{ text-align:center; line-height: 100px; margin: 0; padding: 0; }

html css