Div對齊最佳實踐

我目前正在建立一個示例站點，以遵循我在bootstrap中學到的知識（或者我認爲我學到的東西）。在這個網站上，我想在某個位置對齊DIV。該網站不針對移動設備進行調整，因爲我當時只是在計算機上進行測試。Div對齊最佳實踐

就定位H1 & H2而言，以下代碼是否是最佳實踐？我已經嘗試了大約3個小時，垂直定位div id="outer"垂直&水平居中，無濟於事。沮喪，我轉向position: absolute使用top和left規格。使用我提供的代碼，這是最佳實踐，AKA是對齊這些標題文本的最佳解決方案嗎？非常感謝你提前（抱歉NOOBing）：

https://jsfiddle.net/8kqxtvn8/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.navbar { 
 
    background-color: transparent; 
 
    background: transparent; 
 
    border-color: transparent; 
 
    border-radius: 0; 
 
    display: flex; 
 
    margin: 0; 
 
} 
 

 
.nav { 
 
    display: inline-flex; 
 
    flex-wrap: wrap; 
 
    font-size: 28px; 
 
} 
 

 
.navbar-brand img { 
 
    height: auto; 
 
    margin-top: -15px; 
 
    width: 50px; 
 
} 
 

 
.nav-link { 
 
    margin-right: 2rem; 
 
} 
 

 
.maincontent { 
 
    background-color: grey; 
 
    background-image: url('img/bgcover.jpg'); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
#vertical { 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 15%; 
 
} 
 

 
#outer { 
 
    background-color: yellow; 
 
}

<nav class="navbar navbar-inverse navbar-fixed-top fixed-top"> 
 
    <div class="container-fluid"> 
 
    <nav class="nav"> 
 
     <a class="nav-link" href="#">Galaxies</a> 
 
     <a class="nav-link" href="#">Telescopes</a> 
 
     <div class="logo"> 
 
     <a class="navbar-brand custom-logo" href="#"><img src="https://www.shareicon.net/download/2016/07/11/794282_education_512x512.png" /></a> 
 
     </div> 
 
     <a class="nav-link" href="#">Projects</a> 
 
     <a class="nav-link" href="#">Get involved</a> 
 
    </nav> 
 
    </div> 
 
</nav> 
 

 
<section class="maincontent"> 
 
    <div class="container-fluid"> 
 
    <div class="row" id="vertical"> 
 
     <div id="outer"> 
 
     <h1>Welcome to <span class="LogoTitle">TITLE!</span></h1> 
 
     <h2>Lorem ipsum bla bla bla i dont know bootstrap</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2017-06-16 Helle

你能解釋一下用import導入引導CSS的'link'替換嗎？我從開發人員的網站獲取 – Helle

儘量不要使用絕對的，（絕對元素被其他元素，而忽略其他因素忽略不計）

html, body { 
 
\t height: 100%; 
 
} 
 

 
.navbar { 
 
\t background-color: transparent; 
 
\t background: transparent; 
 
\t border-color: transparent; 
 
\t border-radius: 0; 
 
\t display: flex; 
 
\t margin: 0; 
 
    padding: 0; 
 
} 
 

 
.nav { 
 
\t display: inline-flex; 
 
\t flex-wrap: wrap; 
 
\t font-size: 28px; 
 
} 
 

 
.navbar-brand img { 
 
\t height: auto; 
 
\t margin-top: -20px; 
 
\t width: 50px; 
 
} 
 

 
.nav-link { 
 
\t margin-right: 2rem; 
 
} 
 

 
.maincontent { 
 
\t background-color: grey; 
 
\t background-image: url('img/bgcover.jpg'); 
 
\t background-position: center; 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t height: 100%; 
 
} 
 

 
#vertical { 
 
\t margin-top: 45px; 
 
} 
 

 
#outer { 
 
\t background-color: yellow; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top fixed-top"> 
 
    <div class="container-fluid"> 
 
    \t <nav class="nav"> 
 
     \t <a class="nav-link" href="#">Galaxies</a> 
 
\t \t <a class="nav-link" href="#">Telescopes</a> 
 
     \t <div class="logo"> 
 
\t \t \t <a class="navbar-brand custom-logo" href="#"><img src="https://www.shareicon.net/download/2016/07/11/794282_education_512x512.png" /></a> 
 
\t \t </div>  
 
\t \t <a class="nav-link" href="#">Projects</a> 
 
\t \t <a class="nav-link" href="#">Get involved</a> 
 
    </nav> 
 
    </div> 
 
</nav> 
 

 
<section class="maincontent"> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="row" id="vertical"> 
 
\t \t \t <div id="outer"> 
 
\t \t \t \t <h1>Welcome to <span class="LogoTitle">TITLE!</span></h1> 
 
\t \t \t \t <h2>Lorem ipsum bla bla bla i dont know bootstrap</h2> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</section>

來源

2017-06-16 01:59:53

如果我錯了，請糾正我的錯誤，但如果我試圖將H1和H2放在頁面中心某處，我可能不想使用像素... – Helle

@你好嗎？想要將它們放在頁面的中間？ –

給予或承擔。我擁有它的方式大約是30％，左邊是15％。基於完整的高度/寬度背景圖像及其圖像內容，我就是這樣做的。它看起來是最好的 – Helle

有很多解決方案可以解決您的問題。首先要集中h1和h2標籤，只需在這些元素上添加樣式text-align: center即可。儘管絕對位置方法仍然有效，但您可能需要嘗試margin-top或padding-top以查看要將元素垂直放置的位置。

最好的方法是首先給你的導航欄height，然後建立部分和容器類，併爲它們提供基本樣式，例如寬度，高度，填充，邊距等。

來源

2017-06-16 02:08:21 Pratikshya

因爲我最終想讓網站響應，我不想避免添加太多的高度和寬度？似乎需要額外的工作，並在到達時指定@media查詢。此外，我正在嘗試將我的H1和H2不再居中，而是將其定位在右側，大約一半。看起來像保證金或填充的數字將是巨大的。手機會如何反應？ – Helle

即使使用百分比也不能保證您可以安全地使用媒體查詢。有一件事你應該考慮添加太多嵌套元素的方法。 – Pratikshya

Div對齊最佳實踐

回答

相關問題