Centering <UL> + Keeping <LI>'s Aligned
My problem: http://i56.tinypic.com/ff3jmo.png
The bullet points aren't aligned.
All I'm 开发者_开发百科going is text-align:center'ing the class in which the ul resides. Can I align the bullet points?
EDIT: I just want to try and clarify. I want the actual bullet points aligned. Currently the text is aligned, but not the bullet points.
- T e x t
- T e x t
- T e x t
- T e x t
Where as I want
- Text
- Text
- Text
- (Bullet points aligned, text centered)
text-align: center
isn't to be used for this purpose. You should probably put the <ul>
in a <div>
and center that by setting it to a certain width and using margin-left: auto;
and margin-right: auto
.
So:
<div style="width: 25%; margin-left: auto; margin-right: auto;">
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
You asked the question twice. I answered you at Centering Bullets On A Centered List
Give your div a class name center
. Assuming your div width is 200px, margin:0 auto
will center and text-align:left
will align the text to the left while maintaining its centering due to margin auto.
.center{
width:200px;
margin:0 auto;
text-align:left;
}
Check working example at http://jsfiddle.net/8mHeh/1/
Are you trying to get the li's to align to the left? If so, try putting all of the li's in the class "myliclass" and do this in CSS:
.myliclass {
text-align:left;
}
You don't need margin just above the ul
tag add a div
and add style in it
text-align:left
<div style="text-align:left">
<ul>
<li></li>
</ul>
</div>
精彩评论