在CSS中制作两个div对齐

首先，我查看了所有建议的链接。我是新来的CSS，不知道如何将其纳入到这一点。在CSS中制作两个div对齐

我希望将h1标题的“基本”与标有“网站基础”的标签对齐。他们已经这样做了，但他们并没有直接对准。

下面是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; 
    } 
}

来源

2015-03-31 user3776241

在这里你去：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; }

来源

2015-03-31 20:39:30 vsync

谢谢，我的意思是，“基础”紧靠网站基础，而不是最重要的是：p – user3776241 2015-03-31 20:40:39

好的等待，快来！ – vsync 2015-03-31 20:41:18

@ user3776241 - 现在试试 – vsync 2015-03-31 20:44:32

假设你希望他们左对齐，然后从你的身体中删除text-align:center;，并添加padding:0;到导航的UI元素在你的样式表中。

或者，如果你想在中心的资产净值则增加display: inline;到nav_href所以要用：

#nav_href { 
    display: inline; 
}

来源

2015-03-31 20:30:25 cnorthfield

在CSS中制作两个div对齐

回答

相关问题