並排漂浮中心css

-1

我想將兩個圖像並排居中，但由於某種原因它總是在左側顯示圖像。有誰知道我怎麼能讓他們居中並且彼此相鄰？並排漂浮中心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代碼更新 –

OP需要將兩個div並排在同一行上。 – jack

-1

刪除float：left;從＃box1，＃box2並添加display：inline-block; PS：這是更好，如果你使用.box的代替＃盒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

並排漂浮中心css

回答

相關問題