Выровняйте два divs бок о бок, а затем центрируйте оба divs горизонтально и вертикально

Question

Я попытался оглядеться вокруг, но я не могу понять, что работает.

Как говорится в названии, мне нужно выровнять два divs, чтобы они были центрированы и бок о бок.

<div id="wrapper"> 

<div id="dashboard" style="width: 70%;"> 

    <h3 id="dash" style="color:#99FF00; font-family:monospace;"> 

     <table style="color:#99FF00; font-family:monospace;" cellpadding="7"> 
      <tr> 
       <td>generation</td> 
       <td>1</td> 
      </tr> 
      <tr> 
       <td>currently living</td> 
       <td><p id="initial_current"></p></td> 
      </tr> 
      <tr> 
       <td>recently newborn</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <td>recently died</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <td>recently surviving</td> 
       <td>n/a</td> 
      </tr> 
     </table> 


     <table style="color:#99FF00; font-family:monospace;" cellpadding="7"> 
      <tr> 
       <td>total living</td> 
       <td><p id="initial_total"></p></td> 
      </tr> 
      <tr> 
       <td>total newborns</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <td>total deaths</td> 
       <td>0</td> 
      </tr> 
      <tr> 
       <td>total survived</td> 
       <td>n/a</td> 
      </tr> 
      <tr> 
       <td>the answer to life</td> 
       <td>?</td> 
      </tr> 
     </table> 
    </h3> 
</div> 

<div id="board" style="color:#99FF00; font-size:15pt; font-family:monospace;"> 
</div> 

В принципе, 'обертка' является родительским дел. Я хочу сосредоточиться на «приборной панели» и «доске». Я hava javascript генерирую текст внутри «доски».

Я примерно хочу, глядя, как это:

Answer 1

Используйте позицию абсолютного и объявить поля ниже, и вы хорошо идти

Demo

<style> 
.container { 
    width: 300px; 
    height: 100px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -150px; /* Half of width */ 
    margin-top: -50px; /* Half of height */ 
} 

.left { 
    float: left; 
    width: 150px; 
} 

.right { 
    float: right; 
    width: 150px; 
} 
</style> 

<div class="container"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

Примечание: Не забудьте очистить поплавки, используя clear: both;, иначе используйте overflow: hidden; на cont ainer ДИВ, в настоящее время не я использую height: 100%; поэтому никаких проблем здесь

Answer 2

раствор без компенсирующего: http://jsfiddle.net/GzvJH/

<div class="container"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

и CSS:

.container{ 
    width: 500px; 
    height: 500px; 
    line-height: 500px; 
    text-align:center; 
    border:1px solid red; 
} 

.child{ 

    width:100px; 
    height:100px; 
    border:1px solid black; 
    display:inline-block; 
} 

Answer 3

<style> 
    .container { 
     text-align:center; 
    } 
    .twocolumns { 
     width:50% 
     display:inline-block; 
    } 
</style> 
<div class="container"> 

    <div class="twocolumns"> 
      <p>Look at me im in column 1</p> 
    </div> 

    <div class="twocolumns"> 
      <p>Look at me im in column 2</p> 
    </div> 
</div> 

Я надеюсь, что помогает!