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对齐最佳实践

回答

相关问题