I am trying to center 3 div into a parent div with no result. Could you help me please ?
HTML :
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
CSS :
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
float: left;
background: red;
height: 90px;
}
RESULT :
Change the float:left;
to display:inline-block;
, like this:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
you can try this one:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
Try display flex. You'll need to add vendor prefixes!
#container { text-align: center; display: flex; justify-content: space-between; width: 100%; } #left, #middle, #right { width: 200px; background: red; height: 90px; }
<div id="container"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </div>
#container { text-align: center; } #left, #middle, #right { width: 200px; margin:0px auto; height: 90px; } #left { background: red; } #middle { background:blue; } #right { background: green; }
<div id="container"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </div>
Add Bootstrap CSS and have a look at this example.
Here:
So 4/12=3 Panels in result.
<div class="row">
<div class="col-md-4">left</div>
<div class="col-md-4">middle</div>
<div class="col-md-4">right</div>
</div>
Try Bootstrap it will make your life easy. Here's link for the Grip System you want Bootstrap Grid System .
remove float
& add display inline-block
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
Add margin-left: auto, margin-right:auto, width: 600px
to your container.
Thanks
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.