Question

我正在尝试创建一个带图像的导航栏（向左浮动）和ul（向右浮动）。

我似乎无法弄清楚如何让ul在导航栏中垂直居中，因此它位于最右侧图像的中间位置。

我希望得到这样的东西：

HTML：

<div class="top">
                <img src="http://static1.squarespace.com/static/553aa046e4b0fe84386ad100/t/55e5e602e4b0011b63cf4a51/1441129987213/applelogo.png" alt="">    
                <div class="outerNav">
                    <ul class="nav">
                        <li>Home</li>
                        <li>About</li>
                        <li>Videos</li>
                        <li>Photos</li>
                        <li>Contact</li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>

CSS：

.container {
                height: auto;
                width: 100%;
            }

            .top {
                background-color:black;
                width: 100%;
                padding: 0px 0px;
                float:left;
                margin:0 auto;
            }

            .top img {
                width: 30px;
                border: 1px solid red;
                float:left;
            }

            .top .nav {
                border: 1px solid red;
                width: 50%;
                float:right;
                text-align: right;
            }

            .top .nav li {
                display: inline-block;
                color:white;
            }

            .clear {
                clear: both;
            }

Answer 1

认为这会有所帮助

.top .nav {
    border: 1px solid red;
    width: 50%;
    float:right;
    text-align: right;
    margin-top:0px; /* reset top margin for ul */
}

.top .nav li {
    display: inline-block;
    color:white;
    line-height:32px; /* height of your image */
    vertical-align:middle;
}

Answer 2

请更新以下样式。

.top {
    background-color: black;
    width: 100%;
    padding: 10px 0px;
    float: left;
    margin: 0 auto;
}

.top .nav {
    border: 1px solid red;
    width: 50%;
    float:right;
    text-align: right; 
    margin: 0;}

.top .nav li {
    display: inline-block;
    color:white;
    line-height:32px; /* height of your image */
    vertical-align:middle;
}

Answer 3

试试这个https://jsfiddle.net/2Lzo9vfc/52/

HTML

<div class="top">
    <div class="left">
        <img src="http://static1.squarespace.com/static/553aa046e4b0fe84386ad100/t/55e5e602e4b0011b63cf4a51/1441129987213/applelogo.png" alt="">   
    </div> 
    <div class="outerNav">
        <ul class="nav">
            <li>Home</li>
            <li>About</li>
            <li>Videos</li>
            <li>Photos</li>
            <li>Contact</li>
        </ul>
    </div>
</div>
<div class="clear"></div>
</div>

<强> CSS

.container {
    height: auto;
    width: 100%;
}

.top {
    background-color:black;
    width: 100%;
    padding: 0px 0px;
    margin:0 auto;
    display: table;
}


.top img {
    width: 50px;
    border: 1px solid red;
}

.top .nav {
    border: 1px solid red;
    text-align: right;
}

.top .nav li {
    display: inline-block;
    color:white;
}

.clear {
    clear: both;
}

.left {
    display: table-cell;
    vertical-align: middle;
}

.outerNav {
    display: table-cell;
    vertical-align: middle;
    width: 30%;
}

修改也许更好地从导航中移除宽度https://jsfiddle.net/2Lzo9vfc/53/

左右浮动两个元素并垂直居中UL？

3 个答案: