Center picture and link on body

Question

I want to create an opening page like shown on the picture. On my body i want to place a picture in the center. But i am not able to center the picture vertically. I don't want to use a fixed height because it need to work on any screen.

<body>
    <div id="picture>
         <a id="link" href="...">Link</a>
    </div>
</body>

enter image description here

http://stackoverflow.com/questions/6825464/html5-div-centered-inside-body?rq=1 ? — Romain Braun, Feb 04 '15 at 22:05

score 0 · Answer 1 · answered Feb 04 '15 at 22:42

can you try this :

<html>
<head>
<style>
#picture{
position:absolute;
width:300px;
height:200px;
z-index:15;
top:50%;
left:50%;
margin:-100px 0 0 -150px;
background:green;
}
</style>
</head>
<body>
<div id="picture">
<a id="link" href="...">Link</a>
</div>
</body>
</html>

score 0 · Answer 2 · answered Feb 04 '15 at 22:59

use this in your picture container

#cont{
    margin:0 auto; 
    text-align:center;
}    
    

#cont div{
   display:inline-block;
}

<div id=cont>
    <a href=http://windesk.com.tr><img class="w3cLogo" src="http://windesk.com.tr/views/web/signum/img/windesk.png"></a>
</div>

Center picture and link on body

2 Answers2