Question

我目前正在构建一个示例站点，以跟踪我在bootstrap中学到的内容（或者我认为我学到的内容）。在这个网站上，我想把DIV对准某个位置。该网站尚未针对移动设备进行调整，因为我当时只在我的计算机上进行测试。

以下代码是最佳实践，只要定位H1＆amp; H2？我试过大约3个小时来垂直放置position: absolute＆amp;水平居中，无济于事。我感到很沮丧，转而top使用left和@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; }规格。使用我提供的代码，这是最佳实践，AKA是对齐这些标题文本的最佳解决方案吗？非常感谢你（抱歉NOOBing）：

https://jsfiddle.net/8kqxtvn8/

＆＃13;

<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>

＆＃13;

HTTP

＆＃13;

Answer 1

尽量不要使用绝对值，（绝对元素会被其他元素忽略而忽略其他元素）

html, body {
	height: 100%;
}

.navbar {
	background-color: transparent;
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	display: flex;
	margin: 0;
  padding: 0;
}

.nav {
	display: inline-flex;
	flex-wrap: wrap;
	font-size: 28px;
}

.navbar-brand img {
	height: auto; 
	margin-top: -20px;
	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 {
	margin-top: 45px;
}

#outer {
	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">
  	<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>

Answer 2

您的问题有很多解决方案。首先要将h1和h2标签居中，只需为这些元素添加样式text-align: center即可。虽然绝对定位方法仍然有效，但您可能需要尝试margin-top或padding-top来查看您希望元素垂直放置的位置。

最好的方法是首先给你的导航height，然后构建部分和容器类，并为它们提供宽度，高度，填充，边距等基本样式。

Div对齐最佳实践

2 个答案: