How to center two divs side by side into a container

[PloMar]

I have two DIVs inside a container. Like this:

Code: Select all

<div class="container">
  <div id="dv1">Div 1</div>
  <div id="dv2">Div 2</div>
</div>

I am trying to center the two divs, #dv1 and #dv2 side by side, inside the main container.
How to do that with css?

You can try the code from this example (using text-align: center; on .container, and display: inline-block; for children divs).

Code: Select all

<style>
.container {
  position:relative;
  text-align:center;
}
#dv1, #dv2 {
  display:inline-block;
  width:30%;
  margin:0 4px;
  background:#33f;
}
</style>

<div class="container">
  <div id="dv1">Div 1</div>
  <div id="dv2">Div 2</div>
</div>

Demo:

Div 1

Div 2