web-dev-qa-db-ja.com

2つのdivを互いに中央に配置する方法

2つのdivを隣接して中央に配置するために、次のHTMLを作成しました。

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

ただし、私が書いたコードでは、2つのdivが左端まで浮いています。これが正しく行うことは、2つのdivを並べてフロートさせることです。

2つのdivを並べて中央に配置するには何を変更する必要がありますか？

htmlcsscss-float
34
Daniel Allen Langdon

ラッパーdivにマージンとおそらく特定の幅を自動的に設定する必要があります

<div id="wrapper"></div>

CSSで：

#wrapper {
    width: 70%;
    margin: 0 auto;
}
29
Daff

float: leftを使用する代わりに、display: inline-blockを使用します。

<div id='wrapper' style='text-align: center;'>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet,<br />
        consectetur adipisicing elit
    </div>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
</div>

各内部divの上部は、vertical-align: topを使用して整列されます。

例： http://jsfiddle.net/hCV8f/1/

34
jason_ruz

これを試して：

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;background-color:red;width:50%'>
        Lorem ipsum<br />dolor sit amet
    </div>
    <div style='float:right;background-color:blue;width:50%'>
         Lorem ipsum<br />dolor sit amet
    </div>
</div>

http://jsfiddle.net/JDAyt/

6
Steve Wellens

両方のdivsの幅を事前に知っていますか？もしそうなら、あなたはただのようなことをすることができます

<div class="wrapper" style="margin: 0 auto; width: 200px">
  <div class="inner1" style="width: 100px; float:left;"></div>
  <div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>
3
Jacob

左のdivに対して、左マージンを設定します。正しいdivについては、右側を設定します。このような：

#leftDiv {
    margin-left: auto;
}

#rightDiv {
    margin-right: auto;
}

これにより、画面の中央で背中合わせになります。

0
corpico

以下は私のために働いた

<div id='wrapper'>
    <div class='inner'>
        content 1
    </div>
    <div class='inner'>
        content 2
    </div>
</div>

CSS：

.wrapper
{
text-align: center;width:auto;margin:0 auto
}
.inner
{
display:inline-block;
}
0
Anand

以下のコードは、Zebra GC420dプリンター：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8">
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
    #div { min-height: 100%; }
    </style>
    </head>
    <body>
    <div style="border: 0px solid red;">
    <table border="0" width="100%" align="center">
    <tr>
    <td style="text-align: center;">
    <?php
    echo $name;
    ?>
    </td>
    </tr>
    <tr><td></td></tr>
    <tr>
    <td style="text-align: center;">
    <?php
    echo 'https://goo.gl/2QvRXf';
    ?>
    </td>
    </tr>

    </table>
    </div>

    </body>
    </html>

それが役に立てば幸い ！

0
Aditya P Bhatt