Centering a bulleted list with css
Page 1 of 1
Centering a bulleted list with css
Hi,The use of tables for layout is discouraged and we are supposed to use css instead. Therefore, we shouldbe able to do anything we can do with tables instead with css.
Here is a simple file that uses a table to center a bulleted list and draw a simple border around the list. I have not been able to reproduce this effect with css. I do not want to specify a fixed width, as the size of the text may vary, depending on browser settings.
Do you have a simple way with css to center the list and draw a tight box around it (not spanning the width of the screen)?
Here is the code for the table solution:
<!doctype html>
<html>
<head>
<title>Shopping List With Table</title>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<table style="margin-left: auto; margin-right: auto; border: 1px solid;">
<tr>
<td>
<ul>
<li>Bread</li>
<li>Butter</li>
<li>Eggs</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Re: Centering a bulleted list with css
you have to define a fixed width to make it in center- Code: Select all
<!doctype html>
<html>
<head>
<title>Shopping List With Table</title>
<style type="text/css">
.theStyle {
margin:0 auto;
width:100px;
overflow:visible;
border:solid 1px #000;
}
</style>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<div class="theStyle">
<ul>
<li>Bread </li>
<li>Butter</li>
<li>Eggs</li>
</ul>
</div>
</body>
</html>
Re: Centering a bulleted list with css
CubeSquare wrote:Hello PVX,
It's true, writing tables has changed. But you seem to have a natural handle on using CSS instead of deprecated code. This is complicated because 3 different browsers handle "lists" in 3 different ways. Lists are indented before applying their style. This indentation causes people much misunderstanding, especially when it comes to removing them.
One browser uses padding, another uses margin and still another uses list-style to render the indentation that we are familiar with. Thus to remove the indentation and the list-styles, all three items are necessary:
<ul style="list-style: none;padding: 0;margin: 0;"> which is added to the opening <ul> tag.
Without the style rules, the list will keep it's bullets, but won't look centered, but it is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping List With Table</title>
<style type="text/css">
</style>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<table style="margin: 0 auto;border: 1px solid black;"><!-- centers table -->
<tr>
<td>
<ul style="list-style:none;padding: 0;margin: 0;"><!-- removes bullets -->
<li>Bread</li>
<li>Butter</li>
<li>Eggs</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
If your going to write style rules, put style tags in the head.
Also, take a look at this: http://www.i-carpenter.com/3col/test3col.html
It's all about writing a 3 column layout using CSS.
-CubeSquare
Hi CubeSquare,
Thanks for the reply. Your code works nicely, but the idea was to do away with the table for the bulleted list. So it looks like CSS still has a way to go before it can comfortably replace tables for layout. Your reply was very helpful, though. Learned some more. And, yes, the preferred place to put the CSS code is in the head. I just like to use the inline CSS for testing.
Re: Centering a bulleted list with css
XainPro wrote:you have to define a fixed width to make it in center
- Code: Select all
<!doctype html>
<html>
<head>
<title>Shopping List With Table</title>
<style type="text/css">
.theStyle {
margin:0 auto;
width:100px;
overflow:visible;
border:solid 1px #000;
}
</style>
</head>
<body>
<p style="text-align:center;">Shopping List:</p>
<div class="theStyle">
<ul>
<li>Bread </li>
<li>Butter</li>
<li>Eggs</li>
</ul>
</div>
</body>
</html>
Hi XainPro,
Thanks for the reply. Your code sample does indeed give the desired result. Too bad it needs a fixed width. It would be nice to have an option where the box automatically adjusts to the required width, as it does with tables.
Re: Centering a bulleted list with css
well it have the width:auto option and it do work like tables do butwe are using block level elements like div and ul
we want to center it that's why its becoming more difficult.
but CSS we can add javascript to achieve auto width.
Re: Centering a bulleted list with css
XainPro wrote:well it have the width:auto option and it do work like tables do but
we are using block level elements like div and ul
we want to center it that's why its becoming more difficult.
but CSS we can add javascript to achieve auto width.
Thanks XainPro,
Good to know it can be done with JavaScript. Thanks.
Page 1 of 1