How do I vertically centre an image?
Posted by: Mekon on 20 July 2004
Please excuse the newbie question, but is there simple html code to vertically centre an image? I've tried adding align=middle to the img code, but to no avail.
Posted on: 20 July 2004 by long-time-dead
align=center should do the trick.....
Posted on: 20 July 2004 by long-time-dead
You could also resort to <center> before the line of code.....
Posted on: 20 July 2004 by matthewr
Mekon,
I'm afraid to answer to that seemingly simply question requires you to read several books.
However, broadly speaking, <img> tags are, by default, inline rather than block level elements "align" refers to the images vertical position relative to the text baseline. See this http://www.cookwood.com/html5ed/examples/use_images/align.html, view source, get confused (everybody else does).
The "correct" thing to do is to place the img in a block level element -- typically a DIV -- and then position that using CSS and forget about align altogehter. For an example of how to do this you could do worse than have a look at one of my photgraphy pages (e.g. http://www.comedylimp.com/photographs/baltics2/index.html)
HTML:
<body>
<div class="gallery">
<div class="photo">
<img border="0" src="snowypark.jpg" width="380" height="575"/>
</div>
<div class="title">
Opera House
</div>
CSS:
body {
background-color: #000;
color: #fff;
font: bold 1em Arial, Helvetica, Verdana, sans-serif;
text-align: center; /* IE 5.x workaround */
}
div.gallery {
margin-top: 80px;
width: 630px;
margin-left: auto;
margin-right: auto;
}
div.photo {
background-color: #fff;
padding: 40px 5px 20px 5px;
}
div.title {
color: #000;
background-color: #fff;
padding: 20px 5px 30px 5px;
margin-bottom: 80px;
}
My top tips for woring all this out:
1. Buy Eric Meyer's CSS book. It will improve your HTML/CSS and layout skills a million times. If you read this you will view using a table in HTML as a terrible defeat. See http://www.amazon.com/exec/obidos/tg/detail/-/073571245X/104-8585717-8187948?v=glance
2. If you use Firefox, download the web developer extesnion. The ability to outline block level elements will make sorting out borders, paddings, aligns, divs, td, etc. hugely easier. I cannot emphasise this enough.
3. If you right a lot of CSS get TopStyle http://www.bradsoft.com/topstyle/
Matthew
[This message was edited by Matthew Robinson on Tue 20 July 2004 at 20:47.]
I'm afraid to answer to that seemingly simply question requires you to read several books.
However, broadly speaking, <img> tags are, by default, inline rather than block level elements "align" refers to the images vertical position relative to the text baseline. See this http://www.cookwood.com/html5ed/examples/use_images/align.html, view source, get confused (everybody else does).
The "correct" thing to do is to place the img in a block level element -- typically a DIV -- and then position that using CSS and forget about align altogehter. For an example of how to do this you could do worse than have a look at one of my photgraphy pages (e.g. http://www.comedylimp.com/photographs/baltics2/index.html)
HTML:
<body>
<div class="gallery">
<div class="photo">
<img border="0" src="snowypark.jpg" width="380" height="575"/>
</div>
<div class="title">
Opera House
</div>
CSS:
body {
background-color: #000;
color: #fff;
font: bold 1em Arial, Helvetica, Verdana, sans-serif;
text-align: center; /* IE 5.x workaround */
}
div.gallery {
margin-top: 80px;
width: 630px;
margin-left: auto;
margin-right: auto;
}
div.photo {
background-color: #fff;
padding: 40px 5px 20px 5px;
}
div.title {
color: #000;
background-color: #fff;
padding: 20px 5px 30px 5px;
margin-bottom: 80px;
}
My top tips for woring all this out:
1. Buy Eric Meyer's CSS book. It will improve your HTML/CSS and layout skills a million times. If you read this you will view using a table in HTML as a terrible defeat. See http://www.amazon.com/exec/obidos/tg/detail/-/073571245X/104-8585717-8187948?v=glance
2. If you use Firefox, download the web developer extesnion. The ability to outline block level elements will make sorting out borders, paddings, aligns, divs, td, etc. hugely easier. I cannot emphasise this enough.
3. If you right a lot of CSS get TopStyle http://www.bradsoft.com/topstyle/
Matthew
[This message was edited by Matthew Robinson on Tue 20 July 2004 at 20:47.]