0

Please see screenshot. I'm trying to vertically align the text and background in the table, but odd enough, they are dropping to baseline somehow. I've tried dozens of variations in the CSS but cannot get the text to be middle aligned (vertically) in the background.

HTML

<table cellpadding="0" cellspacing="0" style="width: 100%">
				<tr>
					<td class="style1">
					<h3>Root &amp; Admin Reseller</h3>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="style1">
					<img alt="Cpanel Admin Demo" height="125" src="images/whm-ss-copy.gif" width="200" /></td>
					<td class="auto-style1">Username: demo<br />
					Password: demo</td>
					<td class="auto-style1"><div class="bg-button">
						<a href="http://demo.cpanel.net:2086/login/?user=demo&amp;pass=demo" target="_blank">WebHost Manager Demo</a></div></td>
				</tr>
				<tr>
					<td class="style1">
					<h3>Domain Owner Panel</h3>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="style1">
					<img alt="Cpanel Domain Owner Demo" height="125" src="images/cpanel-ss-endu.gif" width="200" /></td>
					<td class="auto-style1">Username: x3democ<br />
					Password: x3democ</td>
					<td class="auto-style1"><div class="bg-button">
						<a href="http://x3demob.cpx3demo.com:2082/login/?user=x3demob&amp;pass=x3demob" target="_blank">
						cPanel 11 Demo</a></div></td>
				</tr>
				<tr>
					<td class="style1">
					<h3>Reseller Domain Panel</h3>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="style1">
					<img alt="Cpanel Domain Owner Demo" height="125" src="images/cpanel-ss-endu.gif" width="200" /></td>
					<td class="auto-style1">Username: x3demoa<br />
					Password: x3demoa</td>
					<td class="auto-style1"><div class="bg-button">
						<a href="http://x3demoa.cpx3demo.com:2082/login/?user=x3demoa&amp;pass=x3demoa" target="_blank">
						cPanel 11 Demo</a></div></td>
				</tr>
			</table>

CSS

.bg-button {
	color: #fff;
	background: url("../../images/demo-bg.png") top left no-repeat;
	height:60px;
	width:250px;
	text-align:left;
}

Table CSS

.auto-style1 {
		vertical-align: middle;
	}
Attachments site.png 94.02 KB
5
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by Kraai
0

for your text, you need to specify this in your td as well... like so

<td valign="middle">Lorem Ipsum</td>
0

OK, I stripped a lot of the style coding out, and its a very basic table with a border so I could see where the text was and how it was falling into the table cells.

I know I am decaffeinated when I have to copy/paste from w3schools cause I cant seem to type it right.

But, here is the code where I got the CSS to style the table with the text centered.

<html>
<head>
<style type="text/css">
table,th,td
{
border:1px solid black;
vertical-align:center;
text-align:center;
}
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0" style="width: 100%">
				<tr>
					<td class="style1">
					<h3>Root &amp; Admin Reseller</h3>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="style1">
					<img alt="Cpanel Admin Demo" height="125" src="images/whm-ss-copy.gif" width="200" /></td>
					<td class="auto-style1">Username: demo<br />
					Password: demo</td>
					<td class="auto-style1"><div class="bg-button">
						<a href="http://demo.cpanel.net:2086/login/?user=demo&amp;pass=demo" target="_blank">WebHost Manager Demo</a></div></td>
				</tr>
				<tr>
					<td class="style1">
					<h3>Domain Owner Panel</h3>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="style1">
					<img alt="Cpanel Domain Owner Demo" height="125" src="images/cpanel-ss-endu.gif" width="200" /></td>
					<td class="auto-style1">Username: x3democ<br />
					Password: x3democ</td>
					<td class="auto-style1"><div class="bg-button">
						<a href="http://x3demob.cpx3demo.com:2082/login/?user=x3demob&amp;pass=x3demob" target="_blank">
						cPanel 11 Demo</a></div></td>
				</tr>
				<tr>
					<td class="style1">
					<h3>Reseller Domain Panel</h3>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="style1">
					<img alt="Cpanel Domain Owner Demo" height="125" src="images/cpanel-ss-endu.gif" width="200" /></td>
					<td class="auto-style1">Username: x3demoa<br />
					Password: x3demoa</td>
					<td class="auto-style1"><div class="bg-button">
						<a href="http://x3demoa.cpx3demo.com:2082/login/?user=x3demoa&amp;pass=x3demoa" target="_blank">
						cPanel 11 Demo</a></div></td>
				</tr>
			</table>
</body>
</html>

Hope this helps somewhat

Attached is a screenshot of what it looks like.

Attachments TableScreen_One.jpg 142.91 KB
0

okay... seems like i'm lost now. the above picture is what you are looking for, right? so then it's 'solved'?

0

@MJ Pieterse, the above picture and code is what macgurl70 posted to solve the original posters text-align problem. :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.