Vertically Centre text in an absolute block

Forum Moderators: not2easy

Message Too Old, No Replies

Vertically Centre text in an absolute block

uneasyrider

1:56 am on Dec 17, 2010 (gmt 0)

My first post, I came here hoping for help after quite a struggle with what looks to be such a simple thing, but I can't do it. I understand how to do this for every browser but not all of them at the same time. I want correct cross browser compatability. If anyone can help me I would sure appreciate it.

All that I need is an absolutely positioned, outlined block with two or three lines of centered text inside. This is the idea in IE:

p {text-align:center;}

#content {
font-weight:bold;
font-size:16px;
text-align:center;
color:blue;
}

#Text01 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 45px;
top: 696px;
left: 1px;
}

<div id="Text01"><div id="content">
<p>Product Description<br />
Product Price</p>
</div></div>

htmlbasictutor

6:53 am on Dec 17, 2010 (gmt 0)

Works in FF and IE8

CSS - Note I changed the order so it cascades properly

#Text01 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 45px;
top: 696px;
left: 1px;
}

#content {
font-weight:bold;
font-size:16px;
text-align:center;
color:blue;
}

#content p {
text-align:center;
margin: 0;
padding: 0;}

HTML:
<div id="Text01">
<div id="content">
<p>Product Description<br />
Product Price</p>
</div>
</div>

uneasyrider

1:40 pm on Dec 17, 2010 (gmt 0)

Thank you so much for the reply. I should have made myself clearer. I am trying to vertically center the text, the horizontal centering is not a problem.

rainborick

2:40 pm on Dec 17, 2010 (gmt 0)

Try:

#content p {
text-align:center;
margin:auto 0;
padding: 0;}

uneasyrider

4:50 pm on Dec 17, 2010 (gmt 0)

Tried it rainborick, if you look at it like this, with the height at 100px you can see the problem better.

#Text01 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 100px;
top: 696px;
left: 1px;
}

#content {
font-weight:bold;
font-size:16px;
text-align:center;
color:blue;
}

#content p {
text-align:center;
margin: 0;
padding: 0;}

<div id="Text01">
<div id="content">
<p>Product Description<br />
Product Price</p>
</div>
</div>

rocknbil

5:10 pm on Dec 17, 2010 (gmt 0)

Dead Center [wpdfd.com] (or centre, depending on which side of the pond you're on . . . )

The concepts there work perfectly for vertical centering, a caveat - if the viewport is narrower than your left pixel margin it will drive it off the page (crop it.)

Wlauzon

4:40 pm on Dec 19, 2010 (gmt 0)

One thing to consider before you get too worked up about it is that some - or most - fonts do not display exactly the same on all monitors and computers.

So while you can get the centering pretty close using the example given above, it probably will not be perfect across all platforms.

uneasyrider

11:22 pm on Dec 19, 2010 (gmt 0)

I tried the above and it works fine in Expressions multi browser preview but NOT on the live site. It looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html><head>
<style type="text/css">
#Text01 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 45px;
top: 696px;
left: 1px;
}

#Text02 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 45px;
top: 696px;
left: 233px;}

#Text03 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 45px;
top: 696px;
left: 466px;
}
#Text04 {
border: 2px solid #0000FF;
overflow:hidden;
position: absolute;
width: 220px;
height: 45px;
top: 696px;
left: 697px;}
#Text05 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 64px;
top: 1010px;
left: 1px;}

#Text06 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 64px;
top: 1010px;
left: 233px;}

#Text07 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 64px;
top: 1010px;
left: 466px;
}
#Text08 {
overflow:hidden;
border: 2px solid #0000FF;
position: absolute;
width: 220px;
height: 64px;
top: 1010px;
left: 697px;}

#content {
font-weight:bold;
font-size:16px;
text-align:center;
color: blue;
text-align:center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block;}

#data2{
margin-left: -110px;
position: absolute;
top: -23px;
left: 50%;
width: 220px;
height: 46px;
}

#data3{
margin-left: -110px;
position: absolute;
top: -32px;
left: 50%;
width: 220px;
height: 64px;
}

</style>

</head>

<body>

<div id="Text01">
<div id="content">
<div id="data2">
Product Description<br>
Product Price
</div>
</div>
</div>

<div id="Text02">
<div id="content">
<div id="data2">
Product Description<br>
Product Price
</div>
</div>
</div>

<div id="Text03">
<div id="content">
<div id="data2">
Product Description<br>
Product Price
</div>
</div>
</div>

<div id="Text04">
<div id="content">
<div id="data2">
Product Description<br>
Product Price
</div>
</div>
</div>

<div id="Text05">
<div id="content">
<div id="data3">
Logo<br>
Product Description<br>
Product Price
</div>
</div>
</div>
<div id="Text06">
<div id="content">
<div id="data3">
Logo<br>
Product Description<br>
Product Price
</div>
</div>
</div>
<div id="Text07">
<div id="content">
<div id="data3">
Logo<br>
Product Description<br>
Product Price
</div>
</div>
</div>
<div id="Text08">
<div id="content">
<div id="data3">
Logo<br>
Product Description<br>
Product Price
</div>
</div>
</div>

</body>

</html>