Center and Display on Same Line

Question

I\'m trying to display two

elements on the same line, but in the center. To center them, I had to set margin:auto; However, in order to

相关标签:

Answer 1

You can do this, but you'll need an explicit width on your outter 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

Have you tried display: inline-block;? An example of the HTML you are working with would help... put one up at http://jsFiddle.net if inline-block doesn't solve your problem.

Answer 3

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