1

SOを見回してみましたが、うまくいくものが何もわかりません。

タイトルが示すように、2つの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>

基本的に、「ラッパー」は親divです。「ダッシュボード」と「ボード」を中央に配置したい。'board'内にテキストを生成するjavascriptがあります。

私はそれがこのように見えることを大まかに望んでいます：

ここに画像の説明を入力してください

4

3 に答える 3

3

position absolute を使用して、次のようにマージンを宣言すると、準備完了です

デモ

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

注：コンテナdivでclear: both;else useを使用してフロートをクリアすることを忘れないでください。現在使用しているため、ここでは問題ありませんoverflow: hidden;height: 100%;

于 2013-03-22T15:58:00.767 に答える
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;
}
于 2013-03-22T15:59:31.170 に答える
0 
<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>

それが役立つことを願っています！

于 2013-03-22T16:03:26.087 に答える