How to center two divs side by side into a container

PloMar
Posts: 48

How to center two divs side by side into a container

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?

MarPlo
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

Adv. Posts: 01

Similar Topics