Centering
+ Keeping
's Aligned

Question

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)

possible duplicate of [Centering Bullets On A Centered List](http://stackoverflow.com/questions/5347833/centering-bullets-on-a-centered-list) — Hussein, Mar 18 '11 at 04:14

score 4 · Answer 1 · edited Jan 07 '16 at 09:27

4

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>

edited Jan 07 '16 at 09:27

Ken Sharp

934
9
22

answered Mar 18 '11 at 02:38

asthasr

9,125
1
29
43

You'll have to set a width on that div. – Bryan Downing Mar 18 '11 at 02:40
1

Didn't work :S This kept the UL to the left side. To clarify, my problem is the bullet points themselves aren't aligned, but the text is. I want the bullet points aligned. I'm sorry I can't express this very well – CenterMe Mar 18 '11 at 03:14
1

I find `margin:0 auto;` a bit cleaner – Luke Lowrey Mar 18 '11 at 03:15
not sure which universe, but in mine it's margin-left and margin-right – Sebastian Häni Dec 28 '14 at 19:56

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

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/

edited May 23 '17 at 10:29

Community

1
1

answered Mar 18 '11 at 04:08

Hussein

42,480
25
113
143

You can now use `margin: 0 auto; display: table;`. – wazz Aug 09 '17 at 23:44

score 0 · Answer 3 · edited Mar 02 '17 at 13:44

0

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>

edited Mar 02 '17 at 13:44

Donald Duck

8,409
22
75
99

answered Mar 02 '17 at 13:00

sharvari jadhav

1

score 0 · Answer 4 · answered Mar 18 '11 at 02:42

0

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;
}

answered Mar 18 '11 at 02:42

Simon M

2,931
2
22
37

I'm trying to get the li's to align to the center. text-align:center; accomplishes this, but as you can see in the screenshot the bullet points aren't aligned which is what I'm trying to accomplish. – CenterMe Mar 18 '11 at 03:13

Centering
+ Keeping
's Aligned

4 Answers4

Check working example at http://jsfiddle.net/8mHeh/1/

Linked

Centering + Keeping 's Aligned

4 Answers4

Check working example at http://jsfiddle.net/8mHeh/1/

Linked

Centering
+ Keeping
's Aligned