开发者

Centering <UL> + Keeping <LI>'s Aligned

开发者 https://www.devze.com 2023-02-17 19:05 出处:网络
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 point

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

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>
0

精彩评论

暂无评论...
验证码 换一张
取 消