Vertical Align CSS Problem

Question

LogicWeb 0 Junior Poster in Training

13 Years Ago

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;
	}

html-css web-design

5 Contributors
5 Replies
149 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Kraai

Arkinder 93 Posting Pro in Training

13 Years Ago

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

Regards, Arkinder

MJ Pieterse 2 Poster

13 Years Ago

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

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

Reply to this topic

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.

macgurl70 9 Junior Poster · Answer 1 · 2010-11-30T22:59:58+00:00

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.

MJ Pieterse 2 Poster · Answer 2 · 2010-12-01T13:47:37+00:00

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

Kraai 56 Senior Poster Featured Poster · Answer 3 · 2010-12-01T19:47:35+00:00

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