JSFiddle

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 。它仍然没有什么区别。我还希望列表项显示在右侧，但 float：right 也不能给我一个满意的解决方案。

任何帮助都将不胜感激。

谢谢！

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

HTML CSS垂直居中列表项

2 个答案:

JSFiddle