Centering grouped inline elements issue

Question

I have a section that I want to look as if it is centered on the page. I have four boxes that appear inline and I believe the reason they do not like they are centered is because everything is aligned naturally to the left. The thing is, I do not want the content that is in these boxes to be centered, I want them aligned left.

So how can I make the boxes appear as if they are centered within the page, but not have it affect my text?

#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;
  transition:1s; -webkit-transition:1s;
}

<div id="contact-connect">
    <div id="contact-connect-box-container">
        <div class="contact-connect-box">
            <h2 class="contact-connect-title">Call</h2>
            <div class="contact-connect-description">vcxv</div>
        </div>
        <div class="contact-connect-box">
            <h2 class="contact-connect-title">Write</h2>
            <div class="contact-connect-description">
                Reach out to us
                <br>
                <div id="scroll" class="contact-connect-link">Fill out our contact form.</div>
            </div>
        </div>
        <div class="contact-connect-box">
            <h2 class="contact-connect-title">Visit</h2>
            <div class="contact-connect-description">
                fgrge
            </div>
        </div>
        <div class="contact-connect-box">
            <h2 class="contact-connect-title">Connect</h2>
            <div class="contact-connect-description">
                <div class="contact-connect-link"><a href="http://facebook.com" target="_blank">Visit us on Facebook</a></div>
                <div class="contact-connect-link"><a href="http://youtube.com" target="_blank">See us on Youtube</a></div>
                <div class="contact-connect-link"></div>
            </div>
        </div>
    </div>
</div>

Use the standard `text-align:center` on the divs and override it on their children. Otherwise we're looking at flexbox I suspect. Depends on your your requirements. — Paulie_D, May 06 '16 at 15:18
It doesn't appear `text-align: center` and left worked, unless I did it wrong. — Becky, May 06 '16 at 15:22
There's a couple of things going on here...one is that you border/padding are adding to the widths (that can be fixed by adding `box-sizing:border-box`) the other is the [**space between inline-block elements**](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Paulie_D, May 06 '16 at 15:31
@Paulie_D the snippet altered my code. I do not have any inline-block spacing on my page and I do not have borders either. I just added that to better show the 4 different sections and the issue at hand. — Becky, May 06 '16 at 15:34
You **do** have borders...they are clearly stated in the CSS provided and `inline-block` items have spacing **by default**. That's why you need to use the techiniques linked to remove it. — Paulie_D, May 06 '16 at 15:36
@Paulie_D I don't have borders or `inline-block` spacing issues on my actual page. The snippet was merely a quick example to help show this. I am using `inline-block` techniques to remove the spacing and borders are NOT on my page. The issue is the left align making this not look centered. — Becky, May 06 '16 at 15:38
I have told you why. READ. Nor does the border or `inline-block` issues within my snippet have ANYTHING to do with the question. The issue is still present with that. — Becky, May 06 '16 at 15:47

score 1 · Answer 1 · answered May 06 '16 at 15:21

1

You can just add "display: flex" on your #contact-connect-box-container

#contact-connect-box-container {
  margin: 0 auto;
  width: auto;
  display: flex;
}

DEMO : https://jsfiddle.net/w776Lq1u/8/

answered May 06 '16 at 15:21

Sylvain

129
1
8

My issue is I do not have the borders on the actual page, so it still doesn't appeared centered. – Becky May 06 '16 at 15:23
Then just don't set a specific width for the individual boxes. – stackunderflow May 06 '16 at 15:25
How else would I do it?? – Becky May 06 '16 at 15:26
Can't you remove `width: 25%;` from `.contact-connect-box`? – stackunderflow May 06 '16 at 15:28
No, that would bunch everything together. I need the separation and in a responsive way. – Becky May 06 '16 at 15:29
Then add some padding. – stackunderflow May 06 '16 at 15:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111239/discussion-between-stackunderflow-and-becky). – stackunderflow May 06 '16 at 15:32

Chris Stanley · Answer 2 · 2016-05-06T19:38:04.090

1

The problem is the margin on the right side of "Connect." I would recommend using flexbox and using display: flex; justify-content: space-around; That way you won't need any margins at all.

EDIT: plnkr

edited May 06 '16 at 19:38

answered May 06 '16 at 15:24

Chris Stanley

2,766
2
13
18

Didn't help. It still doesn't look centered. It is because everything is aligned to the left. – Becky May 06 '16 at 15:27
Don't align anything. – Chris Stanley May 06 '16 at 19:25
Text is naturally aligned to the left and that is how I want it. I don't actually have `align: left;` in my code. – Becky May 06 '16 at 19:30
I have updated my comment with a plnkr that shows you exactly what I'm talking about. – Chris Stanley May 06 '16 at 19:38

Centering grouped inline elements issue

2 Answers2