question about centering text inside of li

csphard · Sep 14, 2009

The following will center the text from left to right.
How do I center the text from left to right and top to bottom.
I would use padding but is there another way to do this.

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Mozilla Firefox Start Page</title>
<style>
body {font-size: .75em; font-family:arial;margin:0;padding:0;}
ul,li {margin:0;padding:0;}
ul {}
li {margin-bottom: 2px;background-color: #CCCCCC; height: 50px;width: 200px; list-style: none;text-align: center;}
</style>
</head><body>
<div id="menu">
<ul>
<li>test1</li>

<li>test1</li>

<li>test1</li>

<li>test1</li>

<li>test1</li>
</ul>
</div>

</body></html>

vacunita · Sep 14, 2009

The easiest in this case would be to give the li a line-height equal to its height.

line-height:50px;

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

vicvirk · Sep 15, 2009

phil stole my thunder

here's the code

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Mozilla Firefox Start Page</title>
<style>
	body {font-size: .75em; font-family:arial;margin:0;padding:0;}
	ul,li {margin:0;padding:0;}
	ul {}
	li {[COLOR=red]line-height:50px;[/color]margin-bottom: 2px;background-color: #CCCCCC; [COLOR=red]height: 50px;[/color]width: 200px; list-style: none;text-align: center;}
</style>
</head>
<body>
<div id="menu">
	<ul>
		<li>test1</li>
		<li>test1</li>
		<li>test1</li>
		<li>test1</li>
		<li>test1</li>
	</ul>
</div>
</body>
</html>

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

question about centering text inside of li

csphard

Programmer

vacunita

Programmer

vicvirk

Programmer

Similar threads

Part and Inventory Search

Sponsor