将文本垂直对齐图像旁边的中心

时间:2015-03-24 12:34:46

标签: html css

目前我的文字显示在页面顶部。我希望它在垂直方向上对齐 - 所以看起来它似乎位于徽标的中间,但与右侧对齐。

演示: 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;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

请根据徽标的高度使用填充

&#13;
&#13;
.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;
&#13;
&#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
}

DEMO