HTML CSS在列表項中垂直居中放置圖像

Question

我正在嘗試設計一個帶有用戶信息和注銷按鈕的欄。

這是我的HTML代碼：

<html>
<head>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static "auction/style.css" %}" />
    <script type="text/javascript" src="{% static "auction/jquery-1.11.3.min.js" %}"></script>
    <title>Bidding Page</title>
</head>
<body>
    <div class="header">
        <ul>
            <li><a href=""><span>{{ user.first_name }}</span><img id="profile" src="{% static "auction/images/dp.png" %}"></a></li>
            <li><a href="/auction/logout">Logout</a></li>
        </ul>
    </div>
</body>
<html>

這是style.css文件：

body{
    margin: 0;
    padding: 0;
    background: #ccc;
}

.header ul{
    list-style: none;
    text-align: center;
    background-color: #444;
    padding: 0;
    margin: 0;
}

.header li{
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #888;
}

.header a{
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
}

.header a:hover{
    background-color: #005f5f;
}

.header a.active{
    background-color: #fff;
    color: #444;
    cursor: default;
}

@media screen and (min-width: 600px){
    .header li{
        width: 120px;
        border-bottom: none;
        height: 50px;
        line-height: 50px;
        font-size: 1.4em;
    }

    .header li{
        display: inline-block;
        margin-right: 0px;
    }
}

#profile{
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    border: 2px solid #fff;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
}

.header span{
    display: inline-block;
}

.header img{
    margin-left: 10px;
}

我看到圖像沒有垂直居中，即使使用了vertical-align：center屬性也是如此。 它仍然沒有改變。 我也希望列表項顯示在右邊，但要浮動：右邊也不能給我令人滿意的解決方案。

任何幫助，將不勝感激。

謝謝！

Answer 1

對於圖像問題， vertical-align屬性的正確值應該是middle而不是當前center 。

#profile{
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    border: 2px solid #fff;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
}

要使菜單項向右對齊，請從text-align:center;更改為 text-align:right;

.header ul{
    list-style: none;
    text-align: right;
    background-color: #444;
    padding: 0;
    margin: 0;
}

的jsfiddle

Answer 2

 body{ margin: 0; padding: 0; background: #ccc; } .header ul{ list-style: none; text-align: center; background-color: #444; padding: 0; margin: 0; } .header li{ font-family: 'Oswald', sans-serif; font-size: 1.2em; line-height: 40px; height: 40px; border-bottom: 1px solid #888; } .header a{ text-decoration: none; color: #fff; display: block; transition: .3s background-color; } .header a:hover{ background-color: #005f5f; } .header a.active{ background-color: #fff; color: #444; cursor: default; } @media screen and (min-width: 600px){ .header li{ min-width: 120px; border-bottom: none; height: 50px; line-height: 50px; font-size: 1.4em; } .header li{ display: inline-block; margin-right: 0px; vertical-align: middle; } } #profile{ display: inline-block; width: 24px; height: 24px; vertical-align: center; background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; border: 2px solid #fff; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); } .header span{ display: inline-block; } .header img{ margin-left: 10px; vertical-align: middle; }

 <div class="header"> <ul> <li><a href=""><span>Name</span><img id="profile" src="http://lorempixel.com/40/40/people/"></a></li> <li><a href="/auction/logout">Logout</a></li> </ul> </div>

https://jsfiddle.net/kt89e5d8/1/

HTML CSS在列表項中垂直居中放置圖像

問題描述

2 個解決方案

解決方案1
1 2015-08-10 16:47:10

的jsfiddle

解決方案2
1 2015-08-10 16:48:10

HTML CSS在列表項中垂直居中放置圖像

問題描述

2 個解決方案

解決方案1 1 2015-08-10 16:47:10

的jsfiddle

解決方案2 1 2015-08-10 16:48:10

解決方案1
1 2015-08-10 16:47:10

解決方案2
1 2015-08-10 16:48:10