Becky Becky - 2 years ago 76
CSS Question

Container not taking an auto margin

I am having a difficult time with a margin issue. Basically I have 4 boxes displayed inline.

I have the boxes themselves and then an internal container

. What I am trying to do is to get the horizontal margin for the
to be auto, so the start of the content is around the middle point of the box, making the
appear more centered. Right now it looks as if the internal container is aligned left and not taking the
margin: 0 auto;

I am wanting the text to still be aligned left...I just want the internal container to have the horizontal auto margin.

Any ideas?


Here is what it looks like now (paint image showing borders, if it had them).

boxes now

What I want this to look like is this:

I want it to look like this

This is a summary of the code, see the fiddle for the full code for all four boxes.

#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
#contact-connect-box-container {
margin: 0 auto;
width: auto;
.contact-connect-box {
width: 25%;
margin: 60px 0 0 0;
display: inline-block;
/*border: 1px solid black;*/
vertical-align: top;
opacity: 0;
transition:1s; -webkit-transition:1s;
.connect-box-wrap {
margin: 0 auto;

<div id="contact-connect">
<div id="contact-connect-box-container">
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">A</h2>
<div class="contact-connect-description"><a href="tel:3304888300">555.555.5555</a></div>

Answer Source

Add a width to the .connect-box-wrap, such as width:80%. Otherwise it will default to 100% width and the margin:0 auto won't do anything.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download