首先，我查看了所有建议的链接。我是CSS的新手，不知道如何将其整合到其中。
我想让说“ Basics”的h1标头与说“ Site Basics”的标签对齐。它们已经做了一些工作，但是它们并不彼此直接对齐。
这是HTML：
<!DOCTYPE html>
<html>
<header>
<title>Site Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</header>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Site Title</h3>
</div>
</div>
</div>
<div class="container">
<div class="support_container">
<div id="left_nav" class="h_navbar">
<h1 class="h1_title">Basics</h1>
</div>
<div id="right_nav" class="h_navbar">
<ul id="">
<li class="h_tab" id="tab_basics"><a href="#" id="nav_href">Site Basics</a></li>
<li class="h_tab" id="tab_comparison"><a href="#" id="nav_href">Comparision</a></li>
<li class="h_tab" id="tab_whats_new"><a href="#" id="nav_href">What's New</a></li>
<li class="h_tab" id="tab_faq"><a href="#" id="nav_href">FAQ</a></li>
<li class="h_tab" id="tab_issues"><a href="#" id="nav_href">Known Issues</a></li>
<li class="h_tab" id="tab_bug"><a href="#" id="nav_href">Report a Bug</a></li>
<li class="h_tab" id="tab_email"><a href="#" id="nav_href">Email Us</a><li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
自定义CSS：
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/** Container **/
.support_container
{
background-color:white;
padding:30px;
margin:0 auto;
border-radius:7px;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
.h_p {
color:black;
text-shadow:none;
}
#nav_href{
color:black;
text-shadow:none;
}
.h_tab {
display:block;
border-top: 1px solid #eee;
padding: 11px 25px 9px 0;
text-decoration:none;
}
.h1_title {
color:black;
text-shadow:none;
}
#right_nav {
margin: 30px -30px 30px 0;
width:190px;
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
最佳答案
您可以在这里：http://jsbin.com/vugekikana/3/edit
我只需要修改body css而不是text-align:center并添加以下内容：
#left_nav{ display:inline-block; margin-top:10px; }
#right_nav{ display:inline-block; vertical-align:top; }
关于html - 使两个div在CSS中对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29377869/