how to center an image vertically?

  • hello,

    can you tell me how i can center an image in the middle of the page both from left to right and from top to bottom i want the picture to be exactly in the middle.

    my image code is <p><img src="logo.png" width="475" height="125" longdesc="https://deneme.com" /></p>

    how can i center this image with css in the middle of a blank web page.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Well, it really depends upon your layout and the code you have, but try something like margin:auto; in your CSS. Or you may need to do something like margin: 50px auto; . Again, it’s really hard to tell without seeing what you have.

    Thread Starter burakbbb

    (@burakbbb)

    well at the moment all i have is a blank web page.
    body tags only.

    this is all i have.

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url(bg.gif);
}
-->
</style></head>

<body>
<div align="center"><img src="logo.png" width="475" height="125" />
</div>
</body>
</html>

    but i can only display the pic horizontally centered. do you know how i can do it vertically cemtered as well?

    this page is just going to be a welcome page/picture to my blog.
    I would appreciate any help.

    Well, it’s going to be hard to center it exactly on the screen because your visitors may have different sized monitors and it won’t show the same on every single one. But you can definitely position your image down far enough that it gives enough space and appears somewhat centered vertically.

    Personally, I would mark it up like this:

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url(bg.gif);
}

#logo {
       width: 475px;
       height: 125px;
       margin:50px auto;
}

-->
</style></head>

<body>
<div id="logo"><img src="logo.png" width="475" height="125" />
</div>
</body>
</html>

    That should work for you. And just in case you’re unfamiliar, the 50px auto means that you have a 50px margin on the top and bottom and auto margins (centered) on the left and right. You can play with the 50px until it looks the way you want it.

    Why in the world can’t we just center it with the toolbar?? Every other software has a toolbar that can properly center images.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘how to center an image vertically?’ is closed to new replies.