side by side float center css

-1

私は2つのイメージを並べて配置しようとしていますが、何らかの理由で常にイメージを左側に表示しています。私はそれらをどのように中心に置くことができるのか、お互いの隣に誰が知っていますか？side by side float center css

ありがとうございます！

#container { 
 
    width: auto; 
 
    margin: 0 auto; 
 
    border: 1px solid #665544; 
 
    text-align: center; 
 
} 
 

 
#box1, 
 
#box2 { 
 
    border: 1px solid white; 
 
    float: left; 
 
    min-height: 200px; 
 
    color: white; 
 
} 
 

 
#box1 { 
 
    width: 250px; 
 
    background-color: #111; 
 
} 
 

 
#box2 { 
 
    width: 250px; 
 
    background-color: #777; 
 
}

<div id="container"> 
 

 
    <div id="box1"> 
 
    <h1>header1</h1> 
 
    <p>aaa</p> 
 
    </div> 
 

 
    <div id="box2"> 
 
    <h1>header2</h1> 
 
    <p>bbb</p> 
 
    </div> 
 

 
</div>

出典

2017-09-24 max

@jack私はOPの懸念が、その場合には、それらを水平中心に揃えることであると思いますあなたは正しいかもしれない。それは質問に言及されていません。 – bhansa

float: leftを削除し、使用display: inline-block

#box1, #box2 { 
    border: 1px solid white; 
    display: inline-block; 
    min-height: 200px; 
    color: white; 
}

#container { 
 
    width: auto; 
 
    margin: 0 auto; 
 

 
    border: 1px solid #665544; 
 
    text-align: center; 
 
} 
 

 
#box1, #box2 { 
 
    border: 1px solid white; 
 
    display: inline-block; 
 
    min-height: 200px; 
 
    
 
    color: white; 
 
} 
 

 
#box1 { 
 
    width: 200px; 
 
    background-color: #111; 
 
} 
 

 
#box2 { 
 
    width: 200px; 
 
    background-color: #777; 
 
}

<div id="container"> 
 

 
<div id="box1"> 
 
<h1>header1</h1> 
 
<p>aaa</p> 
 
</div> 
 

 
<div id="box2"> 
 
<h1>header2</h1> 
 
<p>bbb</p> 
 
</div> 
 

 
</div>

Fiddle

出典

2017-09-24 20:24:16 jack

更新済み - グリッドを使用できます。

#container { 
     width: 100%; 
     border: 1px solid #665544; 
     display: grid; 
     grid-template-columns: 1fr 1fr; 
     text-align: center; 
    } 

    .box { 
     width: 250px; 
     border: 1px solid white; 
     display: block; 
     min-height: 200px; 
     color: white; 
     margin-right: auto; 
     margin-left: auto; 
    } 

    #box1 { 
     background-color: #111; 
    } 

    #box2 { 
     background-color: #777; 
    }

出典

2017-09-24 20:31:40

コードをテストします。それは問題を解決するものではありません。 – jack

@jack Code Updated –

OPは、両方のdivを同じ行に並べて並べる必要があります。 – jack

-1

float：left; ＃box1、＃box2、およびadd displayから：inline-block; PSは：あなたの代わりに＃BOX1、＃1 BOX2■は

を使用するか、使用している場合、それはより良いのTwitterのブートストラップ（グリッドシステム）

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style type="text/css"> 
     #container { 
      width: auto; 
      margin: 0 auto; 
      border: 1px solid #665544; 
      text-align: center; 
     } 

     .box { 
      width: 250px; 
      border: 1px solid white; 
      display: inline-block; 
      min-height: 200px; 
      color: white; 
     } 

     #box1 { 
      background-color: #111; 
     } 

     #box2 { 
      background-color: #777; 
     } 
    </style> 
</head> 
<body> 

    <div id="container"> 

    <div id="box1" class="box"> 
    <h1>header1</h1> 
    <p>aaa</p> 
    </div> 

    <div id="box2" class="box"> 
    <h1>header2</h1> 
    <p>bbb</p> 
    </div> 

    </div> 

</body> 
</html>

出典

2017-09-24 20:36:54

あなたのソリューションはすでに掲載されています。 – jack

答えて

関連する問題