text position

Paul Udstrand · Sep 13, 2004

hello,

I'm recently updating my web pages, and I have a glitch in my index page.
There are a series of small pictures running down the middle of the page,
next to these photos, I have text such as "weddings", "Portraits" etc. My
problem is that the text is aligned on bottom of the associated photo, I'd
like it to be up in the middle.

Any help would be appreciated.

Paul.

Els · Sep 13, 2004

Paul said:
hello,

I'm recently updating my web pages, and I have a glitch in
my index page. There are a series of small pictures
running down the middle of the page, next to these photos,
I have text such as "weddings", "Portraits" etc. My
problem is that the text is aligned on bottom of the
associated photo, I'd like it to be up in the middle.

Any help would be appreciated.

add
img{vertical-align:middle;}
to your styles

Neal · Sep 13, 2004

hello,

I'm recently updating my web pages, and I have a glitch in my index page.
There are a series of small pictures running down the middle of the page,
next to these photos, I have text such as "weddings", "Portraits" etc.
My
problem is that the text is aligned on bottom of the associated photo,
I'd
like it to be up in the middle.

Any help would be appreciated.

Paul.

There are many ways to do this. Perhaps the easiest is to do this:

CSS:
..foo {position: relative;}

..caption {margin: auto; position: relative; bottom: 40px}

HTML:
<div class="foo">
<img height="100" width="100">
<span class="caption">Weddings</span>
</div>

The container's position: relative makes it the containing block. The
other one offsets the caption. A little less than half the height of the
image should be fine, but adjust as desired.

Note that if the text will be resizable, there's no way to know how many
pixels high the text will be on the user's screen, so it won't be
perfectly centered. But it'll be close.

Neal · Sep 13, 2004

add
img{vertical-align:middle;}
to your styles

I like this better. Yay Els.

Els · Sep 13, 2004

Neal said:
I like this better. Yay Els.

LOL

I first read this, didn't get what you were on about, then
read your other reply. Haven't dived into it, but boy, does
that look complicated <g>

Neal · Sep 13, 2004

I first read this, didn't get what you were on about, then
read your other reply. Haven't dived into it, but boy, does
that look complicated <g>

Not really too complicated, but it goes around the corner to do what yours
does more elegantly and more accurately.

Paul Udstrand · Sep 14, 2004

add
img{vertical-align:middle;}
to your styles

I tried adding this, but got no where. I guess I don't know precisely
where to add it. I'm really clueless.

I tried the css method as well, but got no better results, for the same
reason.

Thanks for trying.

Neal · Sep 14, 2004

I tried adding this, but got no where. I guess I don't know precisely
where to add it. I'm really clueless.

I tried the css method as well, but got no better results, for the same
reason.

Thanks for trying.

I tested my idea and Els' idea, here's how I did it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Center Test</title>
<style type="text/css">
..foo {position: relative;}
..caption {position: relative; bottom: 40px}
..foo2 img {vertical-align: middle;}
</style>
</head>
<body>
<div class="foo">
<img height="100" width="100">
<span class="caption">Weddings</span>
</div>
<div class="foo2">
<img height="100" width="100">
<span class="caption2">Weddings</span>
</div>
</body>
</html>

In practice, the styles would be an external stylesheet. If this at all
confuses you, see http://www.w3schools.com and go through the CSS tutorial.

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Need help making the position of an infinite animation sticky	1	Dec 18, 2022
Iframe link overlapping text	4	Jan 18, 2021
Slideshow not working properly	2	Jan 7, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Position absolute different in different browsers	9	May 9, 2010
So I have (a sketch of) a universal system...	3	Sep 2, 2022
Buttons lining up	1	Feb 6, 2022

text position

Paul Udstrand

Els

Neal

Neal

Els

Neal

Paul Udstrand

Neal

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads