web-dev-qa-db-ja.com

同じ行と中央にある2つのDivが両方を揃える

このような2つのdivがあります

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

同じ行に表示したいので、float:left。

両方をページの中央にも配置したいので、このような別のdivでラップしようとしました

<div style="width:100%; margin:0px auto;">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

しかし、それは機能しません。コードをこれに変更すると

<div style="width:100%; margin-left:50%; margin-right:50%">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

次に、中央に移動しますが、水平スクロールバーがあり、実際には中央に配置されていないようです。

どうすればこれを達成できますか？ありがとう。

編集：内側のdiv（Div 1とDiv 2）も中央に揃えたいです。

csshtmlcenter
25
knightrider

あなたはこれを行うことができます

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

http://jsfiddle.net/jasongennaro/MZrym/

  1. text-align:center;でdivにラップします
  2. divの代わりにfloatsにdisplay:inline-block;を与える

そのCSSをスタイルシートに入れることも最適です。

56
Jason Gennaro

これはあなたのためにできますか？ JSFiddle を確認してください

そしてコード：

[〜＃〜] html [〜＃〜]

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

[〜＃〜] css [〜＃〜]

div.container {
    background-color: #FF0000;
    margin: auto;   
    width: 304px;
}

div.div1 {
    border: 1px solid #000;
    float: left;
    width: 150px;
}

div.div2 {
    border: 1px solid red;
    float: left;
    width: 150px;
}
10
Jules

両方のフローティングdivには幅が必要です！

幅の50％を両方に設定すると、動作します。

BTW、外部div、そのmargin: 0 autoは、内部のものではなく、それ自体を中央に配置します。

2
jackJoe

私はdisplay: inline-blockはブラウザ間でサポートされていないため、IE <8。

.wrapper {
    width:500px; /* Adjust to a total width of both .left and .right */
    margin: 0 auto;
}
.left {
    float: left;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #000;
}
.right {
    float: right;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #F00;
}

<div class="wrapper">
    <div class="left">Div 1</div>
    <div class="right">Div 2</div>
</div>

編集：セル​​間のスペースが必要ない場合は、両方を変更します.leftおよび.rightを使用するにはfloat: left;

1
brezanac

display: inline-blockおよびtext-align: centerを使用して、中央に揃えます。

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    margin: 0 auto;
    text-align: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
    display: inline-block;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

display: flexおよびjustify-content: centerを使用して中央に揃えます

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

display: flex、justify-content: centerおよびalign-items:centerを使用して、垂直方向および水平方向に中央に揃えます。

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>
1
Vignesh Raja

これまでのより良い方法：

  1. Display：inline-blockを指定した場合;内部divに対しては、内部divの子要素もこのプロパティを取得し、内部divの整列を妨げます。

  2. より良い方法は、幅、マージン、フロートを持つ内部divに2つの異なるクラスを使用することです。

今までの最善の方法：

フレックスボックスを使用します。

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
Gohar ul Islam

flexを見てください。

メインdivセットcss display :flex

divは内部にcssを設定します：flex:1 1 auto;

例としてjsfiddleリンクを添付:)

https://jsfiddle.net/hodca/v1uLsxbg/

0
hod caspi