css Horizontally center div in a div

Question

I'm trying to horizontally center a block element on a page.

Here is an example of what I want:

enter image description here

I cannot use div hard sizing because layout should be responsive.

http://fiddle.jshell.net/rdy9nmp0/

Here is the code:

 <div class = "container"> <div class="sub"> <h1> 01</h1> <div class = "icon"><img src="img/settings.png" alt=""> <h2> Power Inside</h2> <p>Cum sociis natoque penatibus et magnis dis parturient montesmus. Pro vel nibh et elit mollis commodo et nec augueique</p> <a class="iconlink" href="/">Read more</a> </div> </div> <div>

CSS

.container { width: 1160px; overflow: hidden; display: inline-flex; margin: 0 auto; } .sub{ padding-top: 30px; padding-bottom: 30px; padding-right: 30px; padding-left: 30px; display: inline-block; vertical-align: top; } .sub h1{ font-size: 90px; color: #efeff0; font-family: 'Ubuntu', sans-serif; padding: 0px; float:left; } .sub img { padding: 10px 0px 10px 0px; } .sub h2 { color: #2a2b2e; font-size: 20px; font-family: 'Ubuntu', sans-serif; } .sub p { color: #8a8a8a; font-size: 13px; font-family: 'Arial', sans-serif; } .sub .icon{ overflow: hidden; padding-left:20px; } .sub .iconlink{ font-size: 13px; color: #2a2b2e; height: 28px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; text-decoration: none; vertical-align:baseline; font-weight: bold; font-family: 'Ubuntu', sans-serif; background: url(../img/shape_blue.png) no-repeat scroll right center #fff; padding: 0 20px 0 0; background-position: right; } .container .iconlink:hover, .iconlink:hover { color: #248cec; background: url(../img/shape_grey.png) no-repeat scroll right center #fff; text-decoration: none; vertical-align:baseline; background-position: right; } .container .iconlink a:active { color: #248cec; } img { display:inline-block; }

Stickers · Accepted Answer · 2015-03-28 16:59:58Z

This should get what you want.

.container { display: flex; /*rather than inline-flex*/ }

If you do need inline-flex than make the parent element text-align:center;

Full Stack Alien · Accepted Answer · 2015-03-28 17:00:04Z

You can still have a responsive layout with "hard" sizing. You can use something called a media query at the bottom of your CSS file that when the page reaches a certain size it will adjust elements to what you have specified. Here is some example code:

 @media (max-width: 400px) { div { width: 20px; } }

Let me know if this makes sense or if you need more explanation. It can be a little confusing at first, but once you get it and see it in action it is pretty cut and dry.

BraisC · Accepted Answer · 2015-03-29 15:54:01Z

Just do wrapper div with width:100%, inside that div create another div with your desired total width and margin: 0 auto and inside that one create 3 divs with 33% width and float:left

<div class="container"> <div class="subcont"> <div><p>This is div1</p></div> <div><p>This is div2</p></div> <div><p>This is div3</p></div> </div> </div> div:not(.container):not(.subcont){ float: left; width: 33%; margin: 0 auto; } .container{ text-align: center; width: 100%; background: green; overflow: hidden; } .subcont{ margin: 0 auto; width: 50%; background: red; overflow: hidden; }

Example: http://jsfiddle.net/cbmkg2e5/

Collectives™ on Stack Overflow

css Horizontally center div in a div

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related