試圖中心頁面上的HTML divs

我想中心在頁面上的div標籤（內容是無關緊要的）。我能夠做到這一點，頁面看起來很棒，但它在任何地方都會被任意邊緣的黑客徹底篡改，以便正確對齊。有人能指點我一個簡單的.css解決方案來拉一個結構看起來像附加圖像的頁面嗎？試圖中心頁面上的HTML divs

來源

2017-04-14 nikotromus

Flex。絕對靈活。 –

Flex it baby;） – Mazz

css網格例如引導。 flex仍然不是通用的（移動Safari？） –

您可以使用純CSS沒有彎曲或網格佈局。以下是使用Bootstrap的示例：

<div class="container"> 
    <div class="block row"></div> 
    <div class="clearfix row row2"> 
    <div class="col-sm-6 col"><div class="block"></div></div> 
    <div class="col-sm-6 col"><div class="block"></div></div> 
    </div> 
    <div class="block row"></div> 
    <div class="clearfix row row4"> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    </div> 
</div> 

.block { 
    background: blue; 
    height: 30px; 
} 
.row { 
    margin-bottom: 20px; 
} 
.row .col:first-child { 
    padding-left: 0; 
} 
.row .col:last-child { 
    padding-right: 0; 
} 
.row4 .col { 
    padding: 0 30px; 
}

這是jsfiddle。

來源

2017-04-14 13:59:35 shaochuancs

現在，這是乾淨的.....謝謝.... – nikotromus

@ shaochuancs - 有沒有辦法做到這一點，而不必指定高度的一切？如果我可以將內容放入內容並自動調整大小，這將是完美的。 – nikotromus

是的，'.block'的高度可以由其內容動態決定。請檢查：https://jsfiddle.net/cshao/j6xsrucm/7/請注意''.block'使用'height：100％'來使塊水平對齊。 – shaochuancs

您可以使用百分比寬度，與float屬性相關聯，以做你想做的。

浮法：https://www.w3schools.com/css/css_float.asp

例如：

HTML：

<div class="header"></div> 
<div class="second-container"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
</div> 
<div class="third-container"> 
</div> 
<div class="fourth-container"> 
    <div class="left"> 
    </div> 
    <div class="middle"> 
    </div> 
    <div class="right"> 
    </div> 
</div>

CSS：

.header{ 
    width:90%; 
    height:50px; 
    margin:5%; 
    background-color:blue; 
    } 

    .second-container{ 
    height:80px; 
    width:90%; 
    margin:5%; 
    } 

    .second-container .left{ 
    height:100%; 
    width:40%; 
    margin-left:5%; 
    margin-right:5%; 
    float:left; 
    background-color:blue; 
    } 

    .second-container .right{ 
    height:100%; 
    width:40%; 
    margin-left:5%; 
    margin-right:5%; 
    float:left; 
    background-color:blue; 
    } 

    .third-container{ 
    height:50px; 
    width:90%; 
    background-color:blue; 
    margin:5%; 
    } 

    .fourth-container{ 
    height:70px; 
    width:90%; 
    margin:5%; 
    } 

    .fourth-container .left{ 
    background-color:blue; 
    height:100%; 
    width:29%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    } 

    .fourth-container .middle{ 
    background-color:blue; 
    height:100%; 
    width:30%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    } 

    .fourth-container .right{ 
    background-color:blue; 
    height:100%; 
    width:29%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    }

當然，如果你想調整你想要的方式，你可以玩保證金的價值。如果你想讓它看起來不錯，只需要照顧100％的同一條線。

的jsfiddle這裏：https://jsfiddle.net/zg1u2dnu/

來源

2017-04-14 14:01:34 Driblou

嗯...有很多方法可以得到這樣的結果。如果你想用純HTML/CSS做，Flexbox的可能是最方便的解決方案：

#wrapper { 
 
    width: 85%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#wrapper > div { 
 
    margin: 10px; 
 
} 
 

 
.blue { 
 
    background-color: #4F81BD; 
 
} 
 

 
#top, #middle-bottom { 
 
    height: 100px; 
 
} 
 

 
#middle-top, #bottom { 
 
    height: 180px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
#middle-top > div { 
 
    width: 45%; 
 
} 
 

 
#bottom > div { 
 
    width: 30%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Flexbox demo</title> 
 
</head> 
 
<body> 
 
    <div id="wrapper"> 
 
    <div id="top" class="blue"></div> 
 
    <div id="middle-top"> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
    </div> 
 
    <div id="middle-bottom" class="blue"></div> 
 
    <div id="bottom"> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

然而，像香草JS，這將不會按預期在所有網頁瀏覽器...我建議您使用前端框架如Bootstrap,Foundation或Semantic UI以獲得最佳效果。

來源

2017-04-14 14:19:40 Badacadabra

試圖中心頁面上的HTML divs

回答

相關問題