Question

我试着环顾四周，但我无法弄清楚任何有用的东西。

正如标题所说，我需要将两个div对齐并排在一起。

<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>

基本上，'wrapper'是父div。我想以'仪表板'和'板'为中心。我hava javascript在'board'中生成文本。

我大概希望它看起来像这样：

enter image description here

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;清除浮点数，否则请使用容器div上的overflow: hidden;，目前正在使用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>

我希望有所帮助！

将两个div对齐，然后将两个div水平和垂直居中

3 个答案: