/    Sign up×
Community /Pin to ProfileBookmark

Tables – Cell Alignment with CSS

Hi –
I’m converting [URL=http://kdla.ky.gov/resources/kysymbols.htm]this table/Front Page document[/URL] to CSS/strict doctype. I can’t figure out how to center the divs in the first column.
I changed the <td align=”center”> to divs with text-align, but that doesn’t seem to work….

Here’s a piece of the table:

[code]
<table style=”border: 0; margin: 0; padding: 4px;”>
<tr valign=”middle”>
<td>
<div style=”text-align: center;”>
<div style=”background-image: url(../Images/KYSymbols/04english.jpg); width: 116px; height: 75px; background-repeat: no-repeat;”></div>
</div>
</td>
<td>
<p class=”content”><strong>State Language</strong>: English,
adopted 1984 (<a href=”http://www.lrc.state.ky.us/krs/002-00/013.PDF”>KRS 2.013</a>)</p>
</td>
</tr>
<tr valign=”middle”>
<td>
<div style=”text-align: center;”>
<div style=”background-image: url(../images/kysymbols/04seal.jpg); width: 75px; height: 75px; background-repeat: no-repeat;”></div>
</div>
</td>
<td>
<p class=”content”><strong>State Seal</strong>, adopted 1942
(KRS 2.020)<br />
&nbsp;&nbsp;&nbsp;&nbsp;<a href=”kyseal.htm”>more about the state seal…</a></p>

<p class=”content”><strong>State Motto</strong>: &quot;United
We Stand, Divided We Fall,&quot; adopted 1942</p>

<p class=”content”><strong>Official Latin Motto</strong>: &quot;<em>Deo
gratiam habeamus&quot;</em> (&quot;Let us be grateful to God&quot;),
adopted 2002 (KRS 2.105)</p></td>
</tr>
<tr valign=”middle”>
<td>
<div style=”text-align: center;”>
<div style=”background-image: url(../images/kysymbols/04flag.jpg); width: 122px; height: 83px; background-repeat: no-repeat;”></div>
</div>
</td>
<td>
<p class=”content”><strong>State Flag</strong>, adopted 1962
(<a href=”http://www.lrc.state.ky.us/krs/002-00/030.PDF”>KRS
2.030</a>)<br />
&nbsp;&nbsp;&nbsp;&nbsp;<a href=”kyflag.htm”>more about the
state flag…</a></p>
<p class=”content”><strong>Pledge of Allegiance to State Flag</strong>:
“I pledge allegiance to the Kentucky flag, and to the Sovereign
State for which it stands, one Commonwealth, blessed with diversity, natural wealth, beauty, and grace from on High.” Adopted 2000.
(<a href=”http://www.lrc.state.ky.us/krs/002-00/035.PDF”>KRS
2.035</a>)</p>
</td>
</tr>
</table>[/code]

(Some of the coding is stinky right now, but it does pass validation.)
Thanks,
KDLA

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@ToeBeeFeb 02.2006 — Try adding text-align: center; and margin: auto; to your background image

[CODE]<div style="background-image: url(../Images/KYSymbols/04english.jpg); width: 116px; height: 75px;
background-repeat: no-repeat; text-align: center; margin: auto;">[/CODE]
Copy linkTweet thisAlerts:
@ray326Feb 03.2006 — For horizontally centered images you can put them in the foreground like so.

<div style="text-align:center;..."><img src="..."></div>

For backgrounds try

<div style="background:url(...) 50% 50% no-repeat"></div>
Copy linkTweet thisAlerts:
@KDLAauthorFeb 03.2006 — NICE!

Thanks, Ray!
×

Success!

Help @KDLA spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...