Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Center Text Vertically
3 views
Skip to first unread message
Mike Copeland
Jan 12, 2012, 6:13:41 PM1/12/12
to
I'm working with some code I got here, but I'm stumped on one issue:
I want to align the text (e.g. "Home", Timing Services", etc.) centered
vertically in the buttons. I've looked at and tried various CSS options
that would seem to do what I want, but nothing does so. 8<{{
Please advise. TIA
<!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>Use CSS</title>
<style type="text/css">
.nav a span { font-size: .8em; }
.floating li { float: left; }
.inlineblock li
{
display: inline-block;
vertical-align: bottom;
}
.nav li
{
margin-bottom: .1em;
margin-right: 800px;
margin-left: 1px;
text-align: center;
list-style-type: none;
line-height: 3em; */
}
.nav a:link, .nav a:visited
{
color: #fff;
background: #1c508c;
text-decoration: none;
height: 3em;
display: block;
border: 3px outset #1c508c;
padding: .2em;
}
.nav a:hover, .nav a:focus
{
border-width: 2px 4px 4px 2px;
color: #ff0;
background: #7c9ec4;
}
.nav a:active
{
border-width: 4px 2px 2px 4px;
border-style: inset;
color: #f00;
background: #3c4e64;
}
</style>
</head>
<body>
<p>Using inline-block list items:</p>
<div class="inlineblock">
<ul class="nav">
<li><a href=".nav">Home</a></li>
<li><a href=".nav">Race Results<br>
<span>(presented by Runners Den)</span></a></li>
<li><a href=".nav">Event Calendar/<br>Online Registration</a></li>
<li><a href=".nav">Results, Questions,<br>Problems</a></li>
<li><a href=".nav">Timing Services</a></li>
<li><a href=".nav">About Us</a></li>
<li><a href=".nav">Contact Us</a></li>
</ul>
</div>
</body>
</html>
I want to align the text (e.g. "Home", Timing Services", etc.) centered
vertically in the buttons. I've looked at and tried various CSS options
that would seem to do what I want, but nothing does so. 8<{{
Please advise. TIA
<!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>Use CSS</title>
<style type="text/css">
.nav a span { font-size: .8em; }
.floating li { float: left; }
.inlineblock li
{
display: inline-block;
vertical-align: bottom;
}
.nav li
{
margin-bottom: .1em;
margin-right: 800px;
margin-left: 1px;
text-align: center;
list-style-type: none;
line-height: 3em; */
}
.nav a:link, .nav a:visited
{
color: #fff;
background: #1c508c;
text-decoration: none;
height: 3em;
display: block;
border: 3px outset #1c508c;
padding: .2em;
}
.nav a:hover, .nav a:focus
{
border-width: 2px 4px 4px 2px;
color: #ff0;
background: #7c9ec4;
}
.nav a:active
{
border-width: 4px 2px 2px 4px;
border-style: inset;
color: #f00;
background: #3c4e64;
}
</style>
</head>
<body>
<p>Using inline-block list items:</p>
<div class="inlineblock">
<ul class="nav">
<li><a href=".nav">Home</a></li>
<li><a href=".nav">Race Results<br>
<span>(presented by Runners Den)</span></a></li>
<li><a href=".nav">Event Calendar/<br>Online Registration</a></li>
<li><a href=".nav">Results, Questions,<br>Problems</a></li>
<li><a href=".nav">Timing Services</a></li>
<li><a href=".nav">About Us</a></li>
<li><a href=".nav">Contact Us</a></li>
</ul>
</div>
</body>
</html>
dorayme
Jan 12, 2012, 7:27:29 PM1/12/12
to
In article
<MPG.2979170ec...@news.eternal-september.org>,
Your markup made it look centred in the browsers I looked at it
on. Are you sure you want the buttons to go down the page (as
they do) instead of across (which is the main point really of
inline-block). Why not post a URL to at least have it appear as
close to how you want it as you can get.
Your css is a little puzzling, margin-right of 800px; surely just
added to test something or other? Some things like the float
doing nothing much, your line-height of even 3em making some text
disappear from your buttons. I did not see a start comment but an
end comment in your CSS? URLs are best, then we see what you want
us to see.
If the text in the buttons is of different number of lines,
button to button, then there are HTML table ways to align the
text to the middle and there are CSS display: table; ways.
For a wild example:
ul
{
display: table;
margin: 0;
padding: 0;
}
li
{
margin-right: .2em;
margin-bottom: 1em;
float: left;
text-align: center;
list-style-type: none;
}
a
{
display: table-cell;
vertical-align: middle;
dorayme
<MPG.2979170ec...@news.eternal-september.org>,
mrc...@cox.net (Mike Copeland) wrote:
> I'm working with some code I got here, but I'm stumped on one issue:
> I want to align the text (e.g. "Home", Timing Services", etc.) centered
> vertically in the buttons. I've looked at and tried various CSS options
> that would seem to do what I want, but nothing does so. 8<{{
> Please advise. TIA
>
...
> I'm working with some code I got here, but I'm stumped on one issue:
> I want to align the text (e.g. "Home", Timing Services", etc.) centered
> vertically in the buttons. I've looked at and tried various CSS options
> that would seem to do what I want, but nothing does so. 8<{{
> Please advise. TIA
>
Your markup made it look centred in the browsers I looked at it
on. Are you sure you want the buttons to go down the page (as
they do) instead of across (which is the main point really of
inline-block). Why not post a URL to at least have it appear as
close to how you want it as you can get.
Your css is a little puzzling, margin-right of 800px; surely just
added to test something or other? Some things like the float
doing nothing much, your line-height of even 3em making some text
disappear from your buttons. I did not see a start comment but an
end comment in your CSS? URLs are best, then we see what you want
us to see.
If the text in the buttons is of different number of lines,
button to button, then there are HTML table ways to align the
text to the middle and there are CSS display: table; ways.
For a wild example:
ul
{
display: table;
margin: 0;
padding: 0;
}
li
{
margin-right: .2em;
margin-bottom: 1em;
float: left;
text-align: center;
list-style-type: none;
}
a
{
display: table-cell;
vertical-align: middle;
color: #fff;
background: #1c508c;
text-decoration: none;
height: 5em;
background: #1c508c;
text-decoration: none;
border: 3px outset #1c508c;
padding: .2em;
}
<ul>
padding: .2em;
}
<li><a href=".nav">Home</a></li>
<li><a href=".nav">Race Results<br>
<span>(presented by Runners Den)</span></a></li>
<li><a href=".nav">Event Calendar/<br>Online
Registration</a></li>
<li><a href=".nav">Results, Questions,<br>Problems</a></li>
<li><a href=".nav">Timing Services</a></li>
<li><a href=".nav">About Us</a></li>
<li><a href=".nav">Contact Us</a></li>
</ul>
--
<li><a href=".nav">Race Results<br>
<span>(presented by Runners Den)</span></a></li>
<li><a href=".nav">Event Calendar/<br>Online
Registration</a></li>
<li><a href=".nav">Results, Questions,<br>Problems</a></li>
<li><a href=".nav">Timing Services</a></li>
<li><a href=".nav">About Us</a></li>
<li><a href=".nav">Contact Us</a></li>
</ul>
dorayme
Mike Copeland
Jan 12, 2012, 10:26:59 PM1/12/12
to
In article <dorayme-2E581D...@news.albasani.net>,
dor...@optusnet.com.au says...
www.raceplaceevents.com
and although I have that working (more or less) I was investigating
other ways to do such things. I'd like to tweak the look of the buttons
(such as rounded corners) and liked what I saw in the code on which I
based my query.
> If the text in the buttons is of different number of lines,
> button to button, then there are HTML table ways to align the
> text to the middle and there are CSS display: table; ways.
Your sample code didn't work, because the buttons weren't of the same
size, as well as changing size and shape when any one of them was
cursored over.
dor...@optusnet.com.au says...
> > I'm working with some code I got here, but I'm stumped on one issue:
> > I want to align the text (e.g. "Home", Timing Services", etc.) centered
> > vertically in the buttons. I've looked at and tried various CSS options
> > that would seem to do what I want, but nothing does so. 8<{{
> > Please advise. TIA
> >
> > I want to align the text (e.g. "Home", Timing Services", etc.) centered
> > vertically in the buttons. I've looked at and tried various CSS options
> > that would seem to do what I want, but nothing does so. 8<{{
> > Please advise. TIA
> >
> Your markup made it look centred in the browsers I looked at it
> on. Are you sure you want the buttons to go down the page (as
> they do) instead of across (which is the main point really of
> inline-block). Why not post a URL to at least have it appear as
> close to how you want it as you can get.
>
> Your css is a little puzzling, margin-right of 800px; surely just
> added to test something or other? Some things like the float
> doing nothing much, your line-height of even 3em making some text
> disappear from your buttons. I did not see a start comment but an
> end comment in your CSS? URLs are best, then we see what you want
> us to see.
I'm trying to modify the following URL:
> on. Are you sure you want the buttons to go down the page (as
> they do) instead of across (which is the main point really of
> inline-block). Why not post a URL to at least have it appear as
> close to how you want it as you can get.
>
> Your css is a little puzzling, margin-right of 800px; surely just
> added to test something or other? Some things like the float
> doing nothing much, your line-height of even 3em making some text
> disappear from your buttons. I did not see a start comment but an
> end comment in your CSS? URLs are best, then we see what you want
> us to see.
www.raceplaceevents.com
and although I have that working (more or less) I was investigating
other ways to do such things. I'd like to tweak the look of the buttons
(such as rounded corners) and liked what I saw in the code on which I
based my query.
> If the text in the buttons is of different number of lines,
> button to button, then there are HTML table ways to align the
> text to the middle and there are CSS display: table; ways.
size, as well as changing size and shape when any one of them was
cursored over.
dorayme
Jan 12, 2012, 11:30:59 PM1/12/12
to
In article
<MPG.297952712...@news.eternal-september.org>,
<http://dorayme.netweaver.com.au/alignSomeText.html>
It works in Sydney. But then, it is lovely weather here at last.
It even works in IE8.
But you cannot count on IE6 or 7 or 8 or maybe even 9 in
"compatibility" mode. But then, you have to be pretty careful
with all sorts of things with earlier IE, even inline-box if you
use it.
--
dorayme
<MPG.297952712...@news.eternal-september.org>,
mrc...@cox.net (Mike Copeland) wrote:
> In article <dorayme-2E581D...@news.albasani.net>,
> dor...@optusnet.com.au says...
...
> In article <dorayme-2E581D...@news.albasani.net>,
> dor...@optusnet.com.au says...
> Your sample code didn't work, because the buttons weren't of the same
> size, as well as changing size and shape when any one of them was
> cursored over.
My example markup does not work on say Firefox? Surely?
> size, as well as changing size and shape when any one of them was
> cursored over.
<http://dorayme.netweaver.com.au/alignSomeText.html>
It works in Sydney. But then, it is lovely weather here at last.
It even works in IE8.
But you cannot count on IE6 or 7 or 8 or maybe even 9 in
"compatibility" mode. But then, you have to be pretty careful
with all sorts of things with earlier IE, even inline-box if you
use it.
--
dorayme
Mike Copeland
Jan 13, 2012, 12:35:06 AM1/13/12
to
In article <dorayme-24EF4E...@news.albasani.net>,
I use others during development after rendering in SeaMonkey). However,
the buttons line up across the top, and I'd really like to have them
line up vertically on the left (as www.Raceplaceevents.com does), along
with equal fixed widths. Is there a way to do that?
(The weather's quite nice here in Phoenix, Arizona, too!) 8<}}
dor...@optusnet.com.au says...
> ...
> > Your sample code didn't work, because the buttons weren't of the same
> > size, as well as changing size and shape when any one of them was
> > cursored over.
>
>
> My example markup does not work on say Firefox? Surely?
>
> <http://dorayme.netweaver.com.au/alignSomeText.html>
>
> It works in Sydney. But then, it is lovely weather here at last.
>
> It even works in IE8.
>
> But you cannot count on IE6 or 7 or 8 or maybe even 9 in
> "compatibility" mode. But then, you have to be pretty careful
> with all sorts of things with earlier IE, even inline-box if you
> use it.
Well, using the link works nicely (in SeaMonkey, my default browser -
> ...
> > Your sample code didn't work, because the buttons weren't of the same
> > size, as well as changing size and shape when any one of them was
> > cursored over.
>
>
> My example markup does not work on say Firefox? Surely?
>
> <http://dorayme.netweaver.com.au/alignSomeText.html>
>
> It works in Sydney. But then, it is lovely weather here at last.
>
> It even works in IE8.
>
> But you cannot count on IE6 or 7 or 8 or maybe even 9 in
> "compatibility" mode. But then, you have to be pretty careful
> with all sorts of things with earlier IE, even inline-box if you
> use it.
I use others during development after rendering in SeaMonkey). However,
the buttons line up across the top, and I'd really like to have them
line up vertically on the left (as www.Raceplaceevents.com does), along
with equal fixed widths. Is there a way to do that?
(The weather's quite nice here in Phoenix, Arizona, too!) 8<}}
dorayme
Jan 13, 2012, 1:23:14 AM1/13/12
to
In article
<MPG.297970786...@news.eternal-september.org>,
Yes, certainly. One quick way is to adapt the CSS in my URL
above. Let's see...
First, obviously, we have to remove the float on li so the list
items stop floating and revert to their natural behaviour of one
under the other. While we are at it, let's remove all the CSS for
the UL element. And lessen the gap between the list items. And
now no need for a right margin.
So far then, we start the new with
<style type="text/css">
li {
margin-right:
margin-bottom: .3em;
/* float: left; remove this line*/
text-align: center;
list-style-type: none;
}
...
Now note that the 'buttons' are only as wide as they need to be
because table cells, like a few other display modes cause
shrink-to-fit. We need to be rid of this as you want all your
buttons to be neatly same width. One simple solution is to add a
set width to the style of the anchor element. So:
a {
display: table-cell;
vertical-align: middle;
color: #fff;
background: #1c508c;
text-decoration: none;
width: 10em; /* add this */
Mind you, if I was your uncle, I would tell you to remove the
height too now and allow the buttons to be as high as they need
to be and no more.
In fact, if I was *really* your uncle, I would suggest even
simpler and not have the table-cell display. Just:
li
{
margin-right: .2em;
margin-bottom: .3em;
and a bit more to cover the states of the anchor...
--
dorayme
<MPG.297970786...@news.eternal-september.org>,
mrc...@cox.net (Mike Copeland) wrote:
> In article <dorayme-24EF4E...@news.albasani.net>,
> dor...@optusnet.com.au says...
> > ...
> > > Your sample code didn't work, because the buttons weren't of the same
> > > size, as well as changing size and shape when any one of them was
> > > cursored over.
> >
> >
> > My example markup does not work on say Firefox? Surely?
> >
> > <http://dorayme.netweaver.com.au/alignSomeText.html>
> >
...
> In article <dorayme-24EF4E...@news.albasani.net>,
> dor...@optusnet.com.au says...
> > ...
> > > Your sample code didn't work, because the buttons weren't of the same
> > > size, as well as changing size and shape when any one of them was
> > > cursored over.
> >
> >
> > My example markup does not work on say Firefox? Surely?
> >
> > <http://dorayme.netweaver.com.au/alignSomeText.html>
> >
> >
> > It even works in IE8.
> >
> > But you cannot count on IE6 or 7 or 8 or maybe even 9 in
> > "compatibility" mode. But then, you have to be pretty careful
> > with all sorts of things with earlier IE, even inline-box if you
> > use it.
>
> Well, using the link works nicely (in SeaMonkey, my default browser -
> I use others during development after rendering in SeaMonkey). However,
> the buttons line up across the top, and I'd really like to have them
> line up vertically on the left (as www.Raceplaceevents.com does), along
> with equal fixed widths. Is there a way to do that?
...
> > It even works in IE8.
> >
> > But you cannot count on IE6 or 7 or 8 or maybe even 9 in
> > "compatibility" mode. But then, you have to be pretty careful
> > with all sorts of things with earlier IE, even inline-box if you
> > use it.
>
> Well, using the link works nicely (in SeaMonkey, my default browser -
> I use others during development after rendering in SeaMonkey). However,
> the buttons line up across the top, and I'd really like to have them
> line up vertically on the left (as www.Raceplaceevents.com does), along
> with equal fixed widths. Is there a way to do that?
Yes, certainly. One quick way is to adapt the CSS in my URL
above. Let's see...
First, obviously, we have to remove the float on li so the list
items stop floating and revert to their natural behaviour of one
under the other. While we are at it, let's remove all the CSS for
the UL element. And lessen the gap between the list items. And
now no need for a right margin.
So far then, we start the new with
<style type="text/css">
li {
margin-right:
margin-bottom: .3em;
/* float: left; remove this line*/
text-align: center;
list-style-type: none;
}
...
Now note that the 'buttons' are only as wide as they need to be
because table cells, like a few other display modes cause
shrink-to-fit. We need to be rid of this as you want all your
buttons to be neatly same width. One simple solution is to add a
set width to the style of the anchor element. So:
a {
display: table-cell;
vertical-align: middle;
color: #fff;
background: #1c508c;
text-decoration: none;
height: 5em;
border: 3px outset #1c508c;
padding: .2em;
}
And Bob is sort of your uncle.
border: 3px outset #1c508c;
padding: .2em;
}
Mind you, if I was your uncle, I would tell you to remove the
height too now and allow the buttons to be as high as they need
to be and no more.
In fact, if I was *really* your uncle, I would suggest even
simpler and not have the table-cell display. Just:
li
{
margin-right: .2em;
margin-bottom: .3em;
text-align: center;
list-style-type: none;
}
a
{
display: block;
list-style-type: none;
}
a
{
color: #fff;
background: #1c508c;
text-decoration: none;
width: 10em;
background: #1c508c;
text-decoration: none;
border: 3px outset #1c508c;
padding: .2em;
}
a:hover {color: #c00; background: #ccc;}
padding: .2em;
}
and a bit more to cover the states of the anchor...
--
dorayme
Thomas 'PointedEars' Lahn
Jan 13, 2012, 4:52:10 PM1/13/12
to
Mike Copeland wrote:
> I'm working with some code I got here, but I'm stumped on one issue:
> I want to align the text (e.g. "Home", Timing Services", etc.) centered
> vertically in the buttons. I've looked at and tried various CSS options
> that would seem to do what I want, but nothing does so. 8<{{
> […]
> I'm working with some code I got here, but I'm stumped on one issue:
> I want to align the text (e.g. "Home", Timing Services", etc.) centered
> vertically in the buttons. I've looked at and tried various CSS options
> that would seem to do what I want, but nothing does so. 8<{{
> .nav li
> {
> margin-bottom: .1em;
> margin-right: 800px;
Please don't.
> {
> margin-bottom: .1em;
> margin-right: 800px;
> margin-left: 1px;
> text-align: center;
> list-style-type: none;
> line-height: 3em; */
There is a syntax error. Once that is fixed, declare the line-height of the
`a' element (which text-in-a-line you want to be vertically centered), not
(only) the `li' element. Of course, this only applies to a *line* of text,
and cannot work as intended if the text is automatically or manually
wrapped. You are currently doing the latter.
> }
>
> .nav a:link, .nav a:visited
> {
> color: #fff;
> background: #1c508c;
> text-decoration: none;
> height: 3em;
> display: block;
> border: 3px outset #1c508c;
> padding: .2em;
^^^^^^^^^^^^^^
> border: 3px outset #1c508c;
> padding: .2em;
You do not want to do that on the same element due to differences in box
models: In the W3C box model the `a' element will have a CSS 2.1 computed
height of 3.2em; in the MSHTML box model it will be 3em high instead.
I suggest you start your stylesheet from scratch, testing each step in all
of the target environments.
> }
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>
0 new messages