-2

This has to be possible!

I've read dozens of questions posted on this site as well as just blindly searching Google. I have one container DIV and two DIVs inside the container. I would like everything inside the container to be centered, but the two DIVs inside the container to align next to each other.

The only way I've seen to accomplish this is to float the two DIVs inside the container. But if I float them then I can't have them centered. And by centered I mean I would like the right border of the left DIV to be touching (or almost touching) the left border of the right DIV.

Someone please educate me! I swear I'll go back to tables! I'm not posting any code, because I don't have any

Thanks for anyone who can help me!

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Protocol Zero
  • 309
  • 2
  • 4
  • 12
  • possible duplicate of [How do I center float elements?](http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements) – Zach Saucier Mar 11 '14 at 18:53

3 Answers3

7

Use display:inline-block with text-align:center on the parent

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • 1
    I'm an idiot. I tried this, but I apparently forgot to close one DIV. Thank you. Now I'm going to go hide in shame for a while. – Protocol Zero Mar 11 '14 at 19:04
4

Fiddle

for Container

text-align:center;

for boxes

 display:inline-block;
Mehmet Eren Yener
  • 2,006
  • 1
  • 23
  • 37
  • You're absolutely right, I had originally chosen this as an answer until I noticed the other guy posted it a couple of minutes sooner. Thank you though! – Protocol Zero Mar 11 '14 at 19:04
2

apply the following to the parent

display: flex;
justify-content:center;
align-items: center;

I personally stay away from floating when I am positioning elements. Flex is a smart way to align items how you want. The justify-content setting can be adjusted to move the elements however you see fit

Cory Lewis
  • 559
  • 5
  • 6