Login | Register | FAQ
Anonymous

Align bullets and text to center page

+ Post a reply

3 posts Page 1 of 1


Align bullets and text to center page

by AshleyBoBashley » Fri Apr 27, 2018 7:29 pm

I aligned the bullets with: <div style="width: 25%; margin:0 auto;"> but the text is still not aligned. The text is centered, but I would like the first letter of each word to be aligned with each other. Right now it looks like the attachment. I want it to look like:

+Red
+Orange
+Yellow
+Green

Attachments

  1. 4-27-2018 1-21-13 PM.jpg (7.18 KiB) Downloaded 304 times

User avatar

AshleyBoBashley

  • Posts: 1
  • Joined: Fri Apr 27, 2018 6:14 pm

Re: Align bullets and text to center page

by pavithra.ramesh » Mon Apr 30, 2018 7:38 am

AshleyBoBashley wrote:I aligned the bullets with: <div style="width: 25%; margin:0 auto;"> but the text is still not aligned. The text is centered, but I would like the first letter of each word to be aligned with each other. Right now it looks like the attachment. I want it to look like:

+Red
+Orange
+Yellow
+Green


I am not sure how you have aligned the list.

Here is a way to align list perfectly.


You need to add the <ul> into a container <div> and then position the container center of the page.

It is better than trying to center the list.


Regards,
User avatar

pavithra.ramesh

  • Posts: 11
  • Joined: Tue Feb 06, 2018 10:50 am

Re: Align bullets and text to center page

by meow » Thu May 03, 2018 4:57 pm

Don't center the text. Center the whole UL. Something like this maybe.

Code: Select all
ul   { width: 4.2em;
       margin: 0 auto;
       list-style-position: inside;
       padding: 0;
       background: lime }
li   { margin: 0; padding: 0 }


If you don't want the bullets to drag outside the list and make the whole thing to look a little off, you need to use the 'list-style-position: inside' declaration. If you would rather have the text dead center and don't mind where the bullets are, just remove that bit. I colored the background so you can see the borders of the box.
User avatar

meow

  • Posts: 5
  • Joined: Thu May 03, 2018 4:53 pm


+ Post a reply

Page 1 of 1