Question

在这种情况下，如何将图像垂直居中在div中。无论我尝试多少，它都不会让步。你能帮忙吗？

<!DOCTYPE html>
<html>
<head>
    <title> New Document </title>
    <link rel="stylesheet" href="http://onr.com/css/nav.css" type="text/css" media="screen">
</head>

<body>

<header>

<div class="cont">

    <div class="logo">
        <img src="/css/logo.png">
    </div>

    <div class="me">
        <ul>
            <li><a href="/">Sign In</a></li>
            <li><a href="/">|</a></li>
            <li><a href="/">Sign Up</a></li>
        </ul>
    </div>
</div>

</body>
</html>

CSS

body {
    color: #333333;
    font-family: "proxima-nova",sans-serif;
    font-weight: 300;
}

.cont{

background: none repeat scroll 0 0 #34495E;
height:50px;
}


.me {
    float:right;
}

.me ul {
    float:right;
    list-style: none outside none;
}

.me li  {
    float:left;
    padding-right: 15px;
    text-decoration:none;
}

.me li  a{
    color: rgba(255, 255, 255, 0.6);
    text-decoration:none;
}

.me li  a:hover{
    color: #ffffff;
}

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

.logo img {
    display: block; margin: auto ;
}

图片图片在这里，但它是白色的。

enter image description here

Answer 1

有用吗？我更改了某个区域Demo

HTML

 <div class="logo">
        <span><img src="http://placehold.it/50x10"></span>
    </div>


.logo{
    float:left;
}
.logo span{
    height:50px;
    vertical-align: middle;
    display: table-cell;

}

.logo img {

}

Answer 2

您使用的是display:table-cell属性，但未实现display:table。

这是修改后的CSS。和工作演示。 http://jsbin.com/sipajopa/1/

body {
    color: #333333;
    font-family: "proxima-nova",sans-serif;
    font-weight: 300;
}

.cont{

background: none repeat scroll 0 0 #34495E;
height:50px;
  display:table; /*Added line*/
  width:100%; /*Added line*/
}


.me {
    display: table-cell; /*Added line*/
}

.me ul {
    float:right;
    list-style: none outside none;
}

.me li  {
    float:left;
    padding-right: 15px;
    text-decoration:none;
}

.me li  a{
    color: rgba(255, 255, 255, 0.6);
    text-decoration:none;
}

.me li  a:hover{
    color: #ffffff;
}

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

.logo img {
    display:inline-block; vertical-align: middle;
}

Answer 3

This should do it

的变化：

删除了.logo规则。
将text-align:center;添加到div.cont。

CSS代码：

body {
    color: #333333;
    font-family: "proxima-nova",sans-serif;
    font-weight: 300;
}

.cont{

background: none repeat scroll 0 0 #34495E;
height:50px;
    text-align:center;
}


.me {
    float:right;
}

.me ul {
    float:right;
    list-style: none outside none;
}

.me li  {
    float:left;
    padding-right: 15px;
    text-decoration:none;
}

.me li  a{
    color: rgba(255, 255, 255, 0.6);
    text-decoration:none;
}

.me li  a:hover{
    color: #ffffff;
}


.logo img {
    display: block; margin: auto ;
}

太容易了！

Answer 4

试试这个。它会这样做

<强> CSS

    body {
    color: #333333;
    font-family: "proxima-nova",sans-serif;
    font-weight: 300;
}

.cont{

background: none repeat scroll 0 0 #34495E;
height:50px;
}


.me {
    float:right;
}

.me ul {
    float:right;
    list-style: none outside none;
}

.me li  {
    float:left;
    padding-right: 15px;
    text-decoration:none;
}

.me li  a{
    color: rgba(255, 255, 255, 0.6);
    text-decoration:none;
}

.me li  a:hover{
    color: #ffffff;
}

.logo {
    float:left;
    line-height: 50px;
    margin-left: 15px;
}

<强> HTML

<div class="cont">

    <div class="logo">
        <img src="Path to your image">
    </div>

    <div class="me">
        <ul>
            <li><a href="/">Sign In</a></li>
            <li><a href="/">|</a></li>
            <li><a href="/">Sign Up</a></li>
        </ul>
    </div>
</div>

无法将徽标图像垂直居中在div中

4 个答案: