Vertical centering in a block element 2

audiopro · Mar 16, 2012

I am using a block element to roll over div background images.

This works fine but I want to display text, vertically centered in the same div. The text is being read from a perl script and varies in length, so the alignment needs to be automatic.

Any attempt to pad the text, results in the background image being padded too.
What can you suggest to do this?

Code:

Style in stylesheet

.offerim{
	width:218px;
	height:327px;
 	float:left;
	font-size:20px;
	text-align:center;
	display:block;
}
.offerim a{
	width:218px;
	height:327px;
	color:#ff0000;
	display:block;
	background-image: url('my_image');
}
.offerim a:hover{
	width:218px;
	height:327px;
	color:#ffffff;
	display:block;
	background-image: url('my_hover_image');
}

------------------------------------------------------------------
Div in page

<div class='offerim'>
	<a href='my_link'>
		<!--#include virtual="cgi-bin/my_perl_script"-->
	</a>
</div>

Keith

http://www.studiosoft.co.uk

ChrisHirst · Mar 16, 2012

vertically??

text-align: center; will centre an inline element horizontally not vertically.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

ChrisHirst · Mar 16, 2012

vertical-align: middle can be used on an inline element or a block element set with display: table-cell;

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

audiopro · Mar 16, 2012

Thanks Chris - That sorted the problem.
I have read that display: table-cell; doesn't work in IE but it works for me, are there any browsers in which it doesn't work?

Centering horizontally is also required but that was simple enough.

Keith

http://www.studiosoft.co.uk

ChrisHirst · Mar 16, 2012

I haven't found any current browsers that don't, including IE8.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

audiopro · Mar 16, 2012

That is a result then, thanks again.

Keith

http://www.studiosoft.co.uk

audiopro · Apr 10, 2012

I can't get this to centre vertically, what am I missing?

Code:

<html>
<head>
</head>
<body>
<div style='
	width:500px;
	height:200px;
	float:left; 
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	border-style:solid;
	border-width:1px;
	border-color:#000000;

'>
Your Personal Message<br>Appears Here
</div>
</body>
</html>

Keith

http://www.studiosoft.co.uk

ChrisHirst · Apr 10, 2012

Vertical align only works on inline elements

http://www.candsdesign.co.uk/reference/css/vertical-align/

OR elements with display: table-cell;

http://www.modtalk.co.uk/_site/code/css/properties/display/table-cell/

Whoo hoo! Two link drops in one post

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

audiopro · Apr 10, 2012

The div has display: table-cell set.

Keith

http://www.studiosoft.co.uk

vacunita · Apr 10, 2012

Its the float. By default all floated elements are made block level elements so the [green]display:table-cell;[/green] property is overridden. This makes the vertical-align property not applicable.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

audiopro · Apr 10, 2012

Just when I think I have got to grips with CSS, I discover another exception to the rule.

I have a grid of 3 x 3 images.
The grid is always 1000px x 500px.
The size of the individual images can change.
The following file is created automatically from the directory of 9 images and the 9 divs, all floated left display correctly.

I want the text in the centre box to be centred both vertically and horizontally. If I remove the float:left, from the centre box, the text aligns vertically but the right, middle image wraps to the lower line and messes up the grid.

If I remove all the float:left statements, I just get the divs stacked in a vertical line.

Code:

<div class='voucher' style='
	width:1000px;
	height:500px;
	margin-bottom: 30px; 
	background-color:#ffffff;
	text-size:20px;
	text-align:center;
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight:normal;
	font-style:normal;
'>
 
<div title='' style='width:403px; height:244px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_01.gif'[/URL] alt=''></div>
 
<div title='' style='width:498px; height:244px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_02.gif'[/URL] alt=''></div>
 
<div title='' style='width:99px; height:244px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_03.gif'[/URL] alt=''></div>
 
<div title='' style='width:403px; height:166px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_04.gif'[/URL] alt=''></div>
 
<div title='' style='width:498px; height:166px; line-height:30px; float:left;display:table-cell; vertical-align:middle; '>Your Personal Message<br>Appears Here
<TMPL_VAR NAME='MESSAGE'>
<TMPL_VAR NAME='VALUE'>
</div>
 
<div title='' style='width:99px; height:166px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_06.gif'[/URL] alt=''></div>
 
<div title='' style='width:403px; height:90px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_07.gif'[/URL] alt=''></div>
 
<div title='' style='width:498px; height:90px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_08.gif'[/URL] alt=''></div>
 
<div title='' style='width:99px; height:90px; float:left;'><img src='[URL unfurl="true"]http://www.xxxxxxx/images/giftvouchers/test/test_09.gif'[/URL] alt=''></div>
 
</div>

Keith

http://www.studiosoft.co.uk

vacunita · Apr 11, 2012

In that case, possibly something like this for your center div:

Code:

<div title='' style='width:498px; height:166px; border:1px solid black; line-height:30px; float:left; [red]display:table;[/red]'>
<div style="[blue]display:table-row[/blue]"> 
<p style="[b][green]display:table-cell;[/green][/b] min-width:100%; height:100%; margin:0; padding:0; border:1px solid red; background-color:#464646; [COLOR=#464646][b]vertical-align:middle;[/b][/color]"> Your Personal Message<br>Appears Here</p></div>
<TMPL_VAR NAME='MESSAGE'>
<TMPL_VAR NAME='VALUE'>

</div>

Though for obvious reasons this ends up being only marginally better than using a table. [sigh] [lol]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

audiopro · Apr 12, 2012

Thanks:-
The present version uses a table as the message container and it works a treat. I think I will just go with that until someone discovers it breaks in some obscure browser.

Here is the code I ended up with, if anyone is interested.

Code:

<div class='voucher' style='
	width:1000px;
	height:500px;
	margin-bottom: 30px; 
	background-color:#ffffff;
	text-size:20px;
	text-align:center;
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight:normal;
	font-style:normal;
'>

<div title='' style='width:441px; height:192px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/1.gif' alt=''></div>

<div title='' style='width:529px; height:192px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/2.gif' alt=''></div>

<div title='' style='width:30px; height:192px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/3.gif' alt=''></div>

<div title='' style='width:441px; height:213px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/4.gif' alt=''></div>

<div title='' style='width:529px; height:213px; line-height:30px; float:left;'>

	<table style='width:529px; height:213px;'>
	<tr>
	<td style='text-align:center; vertical-align:middle;'>
	<TMPL_VAR NAME='MESSAGE'><br><TMPL_VAR NAME='VALUE'>
	</td>
	</tr>
	</table>
</div>

<div title='' style='width:30px; height:213px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/6.gif' alt=''></div>

<div title='' style='width:441px; height:95px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/7.gif' alt=''></div>

<div title='' style='width:529px; height:95px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/8.gif' alt=''></div>

<div title='' style='width:30px; height:95px; float:left;'><img src='XXX.co.uk/images/giftvouchers/footy1/9.gif' alt=''></div>

</div>

Keith

http://www.studiosoft.co.uk

ChrisHirst · Apr 12, 2012

I've never quite figured out the 'puritanical' idea that tables are bad and should never, ever be used and if you transgress from no tables path of righteousness, the CSS gods will strike you down with furious anger.

If what you need is a table structure, then use a table structure. Nobody is going to speak your name in hushed whispers or shout at you in the streets with jeers and terms of derision.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

vacunita · Apr 12, 2012

Its called semantic correctness. Tables should be used for tabular data, though I do agree that once in a while you may have no other choice than to use one; they, for the most part simply make site maintenance harder and logical distribution of elements is no longer an option.

That's not to say you can never ever ever use them and you'll be struck down by the gods if you do.

If there is a real pressing need that cannot be solved otherwise, or cannot be solved in a more straight forward manner then yes by all means go for the table.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

audiopro · Apr 12, 2012

I had expected to be greeted by howls of derision from the Internet Police but I am pleasantly surprised that an air of calm has descended over the forum.

I was tempted to make the whole panel a table but the solution seems to be the best of both worlds.

Keith

http://www.studiosoft.co.uk

ChrisHirst · Apr 12, 2012

Its called semantic correctness.

True, unfortunately some seem to think that "semantic" means "rigidly adhering to a particular paradigm" rather than it being "using the appropriate means or method of presentation to give meaning to [the information]"

In reality the vast majority of people have absolutely no clue of the underlying presentation in any case, they only see the (visible) information, and search engines really don't care how it is presented just as long as it is machine readable, so at the end of the day it MAY, or may not, actually affect users of assistive technology.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Vertical centering in a block element 2

audiopro

Programmer

ChrisHirst

IS-IT--Management

ChrisHirst

IS-IT--Management

audiopro

Programmer

ChrisHirst

IS-IT--Management

audiopro

Programmer

audiopro

Programmer

ChrisHirst

IS-IT--Management

audiopro

Programmer

vacunita

Programmer

audiopro

Programmer

vacunita

Programmer

audiopro

Programmer

ChrisHirst

IS-IT--Management

vacunita

Programmer

audiopro

Programmer

ChrisHirst

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor