0

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 .connect-box-wrap. What I am trying to do is to get the horizontal margin for the .connect-box-wrap to be auto, so the start of the content is around the middle point of the box, making the #contact-connect 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?

Fiddle

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>
                </div>
            </div>
                </div>
            </div>
        </div>
    </div>
Becky
  • 2,283
  • 2
  • 23
  • 50

4 Answers4

2

To use margin: 0 auto; when centering elements, there are a few things that are required as outlined in this answer: https://stackoverflow.com/a/4955135/2106563

The element must display: block

The element must not float

The element must not have a fixed or absolute position

The element must have a width that is not auto

So the only thing missing in your implementation is setting the width. You can set it to a percentage less than 100% and you should notice a change that you're looking for. https://jsfiddle.net/bm4jpwh1/2/

Community
  • 1
  • 1
EnigmaRM
  • 7,523
  • 11
  • 46
  • 72
1

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.

andi
  • 6,442
  • 1
  • 18
  • 43
1

Margin: 0 auto only works if the element has the width set. Plus the element can't be display: inline or display:block.

An alternative would be to set the element to display: inline-block and set the parent with text-align: center.

pedrozath
  • 2,353
  • 4
  • 20
  • 23
0

add to #contact-connect text align center and give to .contact-connect-box text align left.

#contact-connect {
    width: 80%;
    height: auto;
    margin: 0 10%;
    padding: 80px 0;
  text-align: center;
}

.contact-connect-box {
    width: 20%;
    margin: 60px 0 0 0;
    display: inline-block;
    /*border: 1px solid black;*/
    vertical-align: top;
    opacity: 1;
    transition:1s; -webkit-transition:1s;
  text-align: left;
}

Fiddle Example

Guy Ytzhak
  • 364
  • 2
  • 13
  • This is centering the text. I want to leave the text aligned left. Just to essentially center the internal container,. – Becky Jun 06 '16 at 19:44
  • its not horizontaly? http://prntscr.com/bd5dvh ? you can add only text align center to all. – Guy Ytzhak Jun 06 '16 at 19:45
  • I update your fiddle. I give all the item 20% so you can see it horizontali alignment to center: https://jsfiddle.net/bm4jpwh1/1/ @Becky – Guy Ytzhak Jun 06 '16 at 19:48