目前我的文字显示在页面顶部。我希望它在垂直方向上对齐 - 所以看起来它似乎位于徽标的中间,但与右侧对齐。
演示: http://jsfiddle.net/qz65n29f/
.title {
float:left
}
.text-right {
float:right
}
li {
list-style-type:none;
float:left
}

<header>
<div class="row">
<div class="medium-12 columns">
<div class="small-2 columns">
<div class="title">
<a href="" title=""><img src="http://1.bp.blogspot.com/-QOiAoWEw0Vc/UcRdzycinmI/AAAAAAAAABQ/cb2kQ7cJlsY/s200/Google_chrome_logo.png" alt="" class="logo" style="vertical-align:middle" /></a>
</div>
</div>
<div class="small-10 columns">
<div class="text-right">
<nav class="primary right">
<div class="menu-menu-1-container"><ul id="menu-menu-1" class="menu menu inline naked horizontal bold"><li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-88 current_page_item menu-item-102"><a href="http://localhost:8888/wordpress/home/">Home</a></li>
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://localhost:8888/wordpress/about/">About</a></li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost:8888/wordpress/blog/">Blog</a></li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://localhost:8888/wordpress/service-map/">Resources</a></li>
</ul></div> </nav>
</div>
</div>
</div>
</div>
</header>
&#13;
答案 0 :(得分:1)
请根据徽标的高度使用填充
.title {
float:left
}
.text-right {
float:right;
padding:65px 0px;
}
li {
list-style-type:none;
float:left
}
&#13;
<header>
<div class="row">
<div class="medium-12 columns">
<div class="small-2 columns">
<div class="title">
<a href="" title=""><img src="http://1.bp.blogspot.com/-QOiAoWEw0Vc/UcRdzycinmI/AAAAAAAAABQ/cb2kQ7cJlsY/s200/Google_chrome_logo.png" alt="" class="logo" style="vertical-align:middle" /></a>
</div>
</div>
<div class="small-10 columns">
<div class="text-right">
<nav class="primary right">
<div class="menu-menu-1-container"><ul id="menu-menu-1" class="menu menu inline naked horizontal bold"><li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-88 current_page_item menu-item-102"><a href="http://localhost:8888/wordpress/home/">Home</a></li>
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://localhost:8888/wordpress/about/">About</a></li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost:8888/wordpress/blog/">Blog</a></li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://localhost:8888/wordpress/service-map/">Resources</a></li>
</ul></div> </nav>
</div>
</div>
</div>
</div>
</header>
&#13;
答案 1 :(得分:0)
CSS如果你不介意我会改变一点CSS。
.small-2.columns{
display: table-cell;
}
.medium-12.columns{
width: 100%;
display: table;
}
li {
list-style-type:none;
float:left
}