Center <div> and display on one line

Question

I am trying to display two <div> elements on the same line, but in the center. To focus them, I had to install margin:auto ; However, in order to get two lines in one line, I had to do one of the following:

• Set display:inline; (which cancels centering)
• Set float:left; for both (which cancels centering)
• Set display:table-cell; (which cancels centering)

What can I do so that both divs are in the center? Or should I use something else for this? I tried <span> , but the inline property does the same as above to set display:inline; .

EDIT: Here is the CSS for the <div> elements that I am trying to apply for this:

 .homediv { background-color:#F7F7F7; border:1px solid #FFFFFF; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; /* width must be defined in the actual element because it can have various sizes */ -webkit-box-shadow: 0px 0px 8px #888888; -moz-box-shadow: 0px 0px 8px #888888; box-shadow: 0px 0px 8px #888888; margin:auto; text-align:center; padding:4px; } 

In the HTML file, I add only the width for each element, and now I'm trying to add various display properties that will fix the problem. The idea of ​​a “wrapper” suggested below seems to be the only solution, but with this CSS maybe something I'm doing wrong?

SECOND EDIT: As one of the latest additions, what would be the best way to place the space between the two <div> elements, since they have shadow shadows, and I don't want them to be flattened together.

Answer 1

You can do this, but you will need an explicit width in your div.

Try this example:

 .outer { width: 200px; margin: 0 auto; } .inner1 { float: left; background-color: red; padding: 20px; } .inner2 { float: left; background-color: aqua; padding: 20px; } 

 <div class="outer"> <div class="inner1">Hi</div> <div class="inner2">Stackoverflow</div> </div> 

Hope this helps!

Answer 2

Wrap the two elements in another element. Set display:inline-block; for internal elements and margin:0 auto; for the outside.

Answer 3

Have you tried display: inline-block; ? The HTML example you're working with will help ... put one on http://jsFiddle.net if the inline block does not solve your problem.