CODEWITHSUNDEEP
css
Samuel Charpentier
Samuel Charpentier

Reputation: 609

CSS vertical alignment without table

Okay so; I have a this as code:

<header>
    <a href="index.html"><img id="logo" src="img/logo.png" alt="Fin Palais"/></a>
    <a id="menu" href="#"><img id="menu" src="img/menu_mobile.png"></a></div>
</header>

And this is my css:

header{
    display: table;
    overflow: hidden;
    width: 100%;
    height: 104;
    padding-top: 10px;
    background-image:img/header_bg.png;
    background-image: url(img/header_bg.png);
    background-repeat: repeat-x;
    position: fixed;
    left: 0px;
    top: 0px;
    text-align: center;
}
header img#logo{
    height: 94px;
    position: absolute;
    margin: auto 0;
}
header a#menu{
    border-radius: 5px;
    background-clip: padding-box;
    background-color: #4f0000;
    box-shadow: inset 0 0 5px rgba(0,0,0,.75);
    display: block;
    float: right;
    padding: 7px;
}
header a#menu:hover{
    background-color: #850101;
}
header a#menu img{

}

Here it is in jsfiddle

So what I want is to center the <a #menu> verticaly inside of the <header> with out moving the centered <img #logo> so i cant add a div to make the table hack or make is an absolute positioned! it has to be floating right and not affect any thing els in the page! Thanks alot! :)

Upvotes: 0

Views: 324

Answers (1)

Abhishek
Abhishek

Reputation: 380

I hope this solves your issue of getting to center

header a#menu{
    border-radius: 5px;
    background-clip: padding-box;
    background-color: #4f0000;
    box-shadow: inset 0 0 5px rgba(0,0,0,.75);
    padding: 7px;
    position:absolute
}

Upvotes: 1

Related Questions