Cannot center Logo Image Vertically in a div

Question

How in the world do I center an Image vertically inside a div in this case. It wont budge no matter how much I try. Can you help?

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

Image The Image is here, but it's white.

enter image description here

@jmenezes Your title says `vertical`. you say `horizontal`. What is the actual effect to achieve ? — Gaurang Tandon, Mar 18 '14 at 05:57
@GaurangTandon Vertical. That's the result of breaking your head on something for too long. — jmenezes, Mar 18 '14 at 06:40

score 2 · Accepted Answer · answered Mar 18 '14 at 06:01

2

Is it useful? I have changed some area 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 {

}

answered Mar 18 '14 at 06:01

ShibinRagh

6,530
4
35
57

Did you check jsfiddle ? – ShibinRagh Mar 18 '14 at 06:11

score 1 · Answer 2 · answered Mar 18 '14 at 05:58

you are using display:table-cell property but you didn't implelement display:table.

Here is the modified CSS. and working Demo. 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;
}

score 0 · Answer 3 · answered Mar 18 '14 at 05:56

This should do it

Changes:

Removed .logo rules.
Added text-align:center; to div.cont.

CSS code:

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

So easy!

score 0 · Answer 4 · answered Mar 18 '14 at 06:26

Try this. It will do it

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>

The vertical align problem is solved there Brother. Copy my code and see the difference — Hanzallah Afgan, Mar 18 '14 at 06:58

Cannot center Logo Image Vertically in a div

4 Answers4

Linked