vertical-align: middle not working in CSS

Dev Shed Forums Sponsor:

April 7th, 2003, 03:33 PM

dorocky

Junior Member

Join Date: Mar 2003

Location: Cary, NC

Posts: 27

Time spent in forums: < 1 sec
Reputation Power: 0

vertical-align: middle not working in CSS

I put vertical-align:middle in a stylesheet and the text centers but won't align in the middle. This is my code

div.centerpics {
position: absolute;
vertical-align: top;
width:250;
border: 0;
margin: 0;
height: 115px;
top:100px;
left: 250px;
}

div.centerpics h3 {
color: #0066FF;
text-align: center;
vertical-align: middle;
}

My html code is
<div class="centerpics">
<h3>SCHOOLS</h3>
</div>

April 7th, 2003, 03:58 PM

mrrichardfeder

Contributing User

Join Date: Nov 2001

Posts: 765

Time spent in forums: 3 m 45 sec
Reputation Power: 12

CSS text-align aligns content horizontally within a block-level element; vertical-align simply adjusts the vertical alignment of an inline element. You can't use it like valign in a table cell. Try this:

<html>
<head>
<title>untitled</title>
<style type="text/css">

div.centerpics {
position: absolute;
top: 100px;
left: 250px;
width: 250px;
height: 115px;
border: 0px;
margin: 0px;
border: 1px black solid;
}

div.centerpics h3 {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 20px;
text-align: center;
color: #0066FF;
margin-left: -50px;
margin-top: -10px;
}

</style>
</head>
<body>
<div class="centerpics">
<h3>SCHOOLS</h3>
</div>
</body>
</html>

Described here. Don't forget the units ('px')!

More....

Viewing: Dev Shed Forums > Web Design > CSS Help > vertical-align: middle not working in CSS

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump