bootstrap cols沒有排在div的中間

我的問題很簡單，我的Bootstrap cols沒有排在div的中間。bootstrap cols沒有排在div的中間

看一看我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width = device-width, initial-scale = 1"> 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="bootstrap.css"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <style type="text/css"></style> 
    </head> 
    <body> 
     <div id="boxes"> 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
       <div id="box1"> 
        Hello 
       </div> 
      </div> 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
       <div id="box2"> 
        World 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 


#boxes { 
    margin: 0 auto; 
    width: 100%;  
    max-width: 1000px; 
    height: 600px; 
    background-color: rgba(79, 27, 184, 0.29); 
} 
#box1 { 
    width: 400px; 
    height: 260px; 
    border-radius: 10px; 
    background-color: rgba(37, 100, 165, 0.80); 
    border: 1px solid rgba(37, 100, 165, 0.80); 
    margin-top: 50px; 
    text-align: center; 
} 

#box2 { 
    width: 400px; 
    height: 260px; 
    border-radius: 10px; 
    background-color: rgba(37, 100, 165, 0.80); 
    border: 1px solid rgba(37, 100, 165, 0.80); 
    margin-top: 50px; 
    text-align: center; 
}

我已經把col-lg月6日，這應該是每盒格的50％。但這些盒子顯然不在他們的中心。任何幫助，這將不勝感激。謝謝。

來源

2017-09-20 Michael

自舉電網包裝你的代碼需要列是一個'.row'元素中才能正常工作。你不應該在這個父母上應用最大寬度 - 爲此使用一個'.container'元素。 – CBroe

你在說什麼水平或垂直「居中」在這裏？或兩者？ – CBroe

如果您更改您的box2中的保證金，就像這樣，您正在尋找什麼？

#box2 {  
    margin: 50px auto 0 auto;  
}

來源

2017-09-20 12:06:20 DorianB

如果你與引導4個工作與.rowfiddle

#boxes { 
 
    margin: 0 auto; 
 
    width: 100%;  
 
    max-width: 1000px; 
 
    height: 600px; 
 
    background-color: rgba(79, 27, 184, 0.29); 
 
} 
 
#box1 { 
 
    width: 400px; 
 
    height: 260px; 
 
    border-radius: 10px; 
 
    background-color: rgba(37, 100, 165, 0.80); 
 
    border: 1px solid rgba(37, 100, 165, 0.80); 
 
    margin-top: 50px; 
 
    text-align: center; 
 
} 
 

 
#box2 { 
 
    width: 400px; 
 
    height: 260px; 
 
    border-radius: 10px; 
 
    background-color: rgba(37, 100, 165, 0.80); 
 
    border: 1px solid rgba(37, 100, 165, 0.80); 
 
    margin-top: 50px; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
     <div id="boxes" class="row"> 
 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
       <div id="box1"> 
 
        Hello 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
       <div id="box2"> 
 
        World 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body>

來源

2017-09-20 12:10:34 Znaneswar

bootstrap cols沒有排在div的中間

回答

相關問題