Resolved Text not centered. [Archive]

...

View Full Version : Resolved Text not centered.

Vernier

06-10-2012, 01:08 AM

As you can see here:

http://habfab.com/david/realfm/

the text isn't centered in the elements.

The css is as follows:

body {
background-color: #F5F5F5;
font-size: 13px;
}

#topcontainer {
height:64px;
}

.header {
background: url('../_images/Page_Header.gif');
background-repeat: repeat-x;
height: 64px;
margin:-9px;
position:relative;
left:0px;
top:0px;
z-index:-1;
width: 100%;
}

.social {
background: url('../_images/logo_social_03.gif');
background-repeat: no-repeat;
height: 64px;
position:absolute;
left:0px;
top:0px;
z-index:1;
width: 338px;
margin-left: 130px;
}

#row1 {
padding: 20px;
}

.advertisement {
background: url('../_images/Advertise-Box.gif');
background-repeat: no-repeat;
height: 273px;
width: 351px;
margin-right: 7px;
display:table;
}

.slider {
background: url('../_images/Slider.gif');
background-repeat: no-repeat;
height: 273px;
width: 727px;
margin-left: 7px;
display:table;
}

#row2 {
padding: 15px;
}

.radioinfohead {
background: url('../_images/Radio_Info_Header.gif');
background-repeat: no-repeat;
height: 32px;
width: 351px;
margin-right: 7px;
display: table;
}

.radioinfocontent {
background: url('../_images/Radio_Info_Content.gif');
background-repeat: repeat-y;
padding: 25px;
width: 351px;
margin-right: 7px;
display: table;
text-align: center;
}

.realfmhead {
background: url('../_images/Real_Content_Header.gif');
background-repeat: no-repeat;
height: 32px;
width: 727px;
margin-left: 7px;
display: table;
}

.realfmcontent {
background: url('../_images/Real_Content.gif');
background-repeat: repeat-y;
padding: 25px;
width: 727px;
margin-left: 7px;
display: table;
text-align: center;
}

#row3 {
padding: 0px;
}

.newshead {
background: url('../_images/News_Header.gif');
background-repeat: no-repeat;
height: 32px;
width: 1091px;
display: table;
}

.newscontent {
background: url('../_images/News_Content.gif');
background-repeat: repeat-y;
padding: 25px;
width: 1091px;
display: table;
text-align: center;
margin: auto auto;
}

The html is:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="topcontainer">
<div class="header"></div>
<a href="#" class="social"></a>
</div>
<div id="row1" align="center">
<table border="0" cellpadding="0" cellspacing ="0" align="center">
<tr>
<td><a href="#" class="advertisement"></a></td>
<td><a href="#" class="slider"></a></td>
</tr>
</table>

<div id="row2" align="center">
<table border="0" cellpadding="0" cellspacing ="0" align="center">
<tr>
<td><div class="radioinfohead"></div></td>
<td><div class="realfmhead"></div></td>
</tr>
<tr>
<td><div class="radioinfocontent">content</div></td>
<td><div class="realfmcontent">Content Here :)</div></td>
</tr>
</table>
</div>

<div id="row3" align="center">
<table border="0" cellpadding="0" cellspacing ="0" align="center">
<tr>
<td><div class="newshead"></div></td>
</tr>
<tr>
<td><div class="newscontent">Content Here :)</div></td>
</tr>
</table>
</div>
</body>
</html>
How can I center the text? I'm using text-align: center;

JJackson

06-10-2012, 01:15 AM

Are you referring to the "Content Here :)" text? It's centered for me and I am using Chrome.

Vernier

06-10-2012, 01:06 PM

What would be the best way to center these?

http://img651.imageshack.us/img651/2811/522f0f99122c4797bdce078.png

Cheers

Vernier

06-10-2012, 01:15 PM

Cheers - when I do this though they aren't inline.

http://img43.imageshack.us/img43/1562/da20f4c1f6684548aad6d27.png

Cheers

Vernier

06-10-2012, 01:23 PM

CSS:

body {
background-color: #F5F5F5;
font-size: 13px;
}

#menu {
height:64px;
}

.header {
background: url('../_images/Page_Header.gif');
background-repeat: repeat-x;
height: 64px;
margin:-9px;
position:relative;
left:0px;
top:0px;
z-index:-1;
width: 100%;
}

.social {
background: url('../_images/logo_social_03.gif');
background-repeat: no-repeat;
height: 64px;
position:absolute;
left:0px;
top:0px;
z-index:1;
width: 338px;
margin-left: 130px;
}

#firstrow {
width: 1100;
margin-left: auto;
margin-right: auto;
}

.advertise {
background: url('../_images/Advertise-Box.gif');
background-repeat: no-repeat;
height: 273px;
width: 351px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}

.slider {
background: url('../_images/Slider.gif');
background-repeat: no-repeat;
height: 273px;
width: 727px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}

Html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="menu">
<div class="header"></div>
<div class="social"></div>
</div>
<div id="firstrow">
<div class="advertise"></div>
<div class="slider"></div>
</div>
</body>
</html>

Cheers

Will Bontrager

06-10-2012, 03:20 PM

For centering background images both vertically and horizontally,background-repeat:no-repeat;
background-position:center center; should work.

Will

Vernier

06-10-2012, 03:24 PM

Cheers Will - unfortunately it's still the same :(

Thanks :)

Vernier

06-10-2012, 03:54 PM

Sorted - thanks :D