Member Avatar for LogicWeb

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;
	}
site.png 94.02 KB
  • 5 Contributors
  • 5 Replies
  • 149 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Kraai

Recommended Answers

All 5 Replies

Member Avatar for Arkinder

The vertical-align property is for images, not text.

Regards, Arkinder

Member Avatar for MJ Pieterse

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

<td valign="middle">Lorem Ipsum</td>
Member Avatar for macgurl70

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.

TableScreen_One.jpg 142.91 KB
Member Avatar for MJ Pieterse

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

Member Avatar for Kraai

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.