/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Center Align

Copy linkTweet thisAlerts:
Jul 26.2006

Hi. This shouldn’t be too hard. I’ve read the CSS documentation at w3schools, and this just doesn’t seem to work. I have a bar at the bottom of the screen, and I want to center text vertically on this bar.

[code]
#bar
{
position: absolute;
bottom: 0;
height:31;
width:100%;
}
#bartext
{
position: relative;
vertical-align:middle;
float:right;
height:31px;
width:10%;
font-family: tahoma;
color:white;
}
[/code]
[code]
<div id=”bar”>
…
<div id=”bartext”>
Vertically Centered Text
</div>
</div>
[/code]

It seems, from the css documentation, that ‘vertical-align:middle’ should do it, but it is still top aligned. What am I missing? Thanks.

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 26.2006 — Is "vertical-align:middle;" even valid? It looks rather html4.0-ish to me...

Is this what you're trying to do?

#bar

{

position: absolute;

bottom: 0;

height:31px;

width:100%;

border:1px solid gray;

}

#bartext

{

position: relative;

margin: 0 auto;

text-align:center;

height:31px;

width:10%;

font-family: tahoma;

color:red;

border:1px solid gray;

}

</style>

</head>

<body>

<div id="bar">

...

<div id="bartext">

Vertically Centered Text

</div>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@BlazeixauthorJul 26.2006 — That doesn't seem to be quite what I'm going for. text-align horizontally centers the text, right? I want to [u]vertically[/u] center it. Here is the w3schools documentation of [url=http://www.w3schools.com/css/pr_pos_vertical-align.asp]vertical-align[/url]. It seems like it should work, but it doesn't.
Copy linkTweet thisAlerts:
@cyberphrJul 26.2006 — <div id="bartext" align="center">
Copy linkTweet thisAlerts:
@kiwibritJul 26.2006 — [url=http://www.ibloomstudios.com/article6/]Vertical-align notes[/url].
Copy linkTweet thisAlerts:
@BlazeixauthorJul 26.2006 — kiwibrit, thanks for the link, I was using it wrong. Now I'm using it how the article says, and it still isn't working.

<i>
</i>&lt;div style="background-color:red;height:200px"&gt; &lt;!---this is the container---&gt;
&lt;span style="vertical-align:middle"&gt; &lt;!---This is the inline element that should be centered---&gt;
Vertically Centered Text
&lt;/span&gt;
&lt;/div&gt;


This should work, shouldn't it?
Copy linkTweet thisAlerts:
@kiwibritJul 26.2006 — A table cell

<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
p {vertical-align:middle}
table {height:220px}
&lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;UTest document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table width="200" border="0"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;p&gt;Let's have this vertically centered!&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

gives you the effect you want.

In CSS, [url=http://www.safaribears.de/content.php?page=csstutorial&chap=8]things are rather different[/url].

Personally, I usually use margins to give the text positioning I want within a div.
Copy linkTweet thisAlerts:
@ray326Jul 26.2006 — bottom: 0;

height:31;

width:100%;[/QUOTE]Did you fix that height? Try setting the line-height in the footer to 31px.
Copy linkTweet thisAlerts:
@BlazeixauthorJul 26.2006 — Yes, I fixed the height. I have an image that is 31px tall that is being repeated along the x axis. Is there any way to do it without a table? Shouldn't this work? It doesn't.

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
span {position:relative;vertical-align:middle}
div {height:220px; background-color:red}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;span&gt;Let's have this vertically centered!&lt;/span&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@ray326Jul 27.2006 — Well, if you'd try line-height like I've been saying.
[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
span {line-height:220px}
div {height:220px; background-color:red}
</style>
</head>
<body>
<div>
<span>Let's have this vertically centered!</span>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@BlazeixauthorJul 27.2006 — Thanks ray, that works. I tried messing with line-height after your post, but I wasn't sure if you meant anything special by 'footer.'
Copy linkTweet thisAlerts:
@bokehJul 27.2006 — Is "vertical-align:middle;" even valid? It looks rather html4.0-ish to me...[/QUOTE]Perfectly valid. It is for use on inline elements and table cells. Since both a div and a float are block level it would not be valid in this context.
×

Success!

Help @Blazeix spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...