rodwater rodwater - 4 months ago 7
CSS Question

centering divs on the same line

I'm trying to center these 3 floated divs on the same line. Here is a link to jsfiddle:

https://jsfiddle.net/dtps4fw8/2/

any suggestions?

HTML:

<div class="content">

<div class="box">

</div>
<div class="box">

</div>
<div class="box">

</div>

</div>


CSS:

.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}

Answer

First the float:left; is not relevant in your case, just like Lal said, instead of float:left; its should be display:inline-block; and you can also add a relative positioning position:relative;

Comments