How to Align a list in HTML? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How to Align a list in HTML?

How can someone align a list in the left, right and center in HTML?

9th Jan 2017, 12:57 PM
Hamoud Bueno
Hamoud Bueno - avatar
12 Answers
+ 7
Is this what you want? : <html> <head> <title>learning HTML </title> <body> <ul style="float:left;"> <li> green </li> <li>blue </li> <li>yellow </li> <li>Black</li> <li>Brown</li> </ul> <ol style="float:right;"> <li> green </li> <li>blue </li> <li>yellow </li> <li>Black</li> <li>Brown</li> </ol> </body> </head> </html> (the one floats next to the other)
9th Jan 2017, 3:03 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 6
Just don't put float:right; to the first! ^_^
9th Jan 2017, 3:28 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 6
Don't use <center> just put style="float:right;" to the second list…
9th Jan 2017, 4:22 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 5
<center><dl>Test</dl><dd>test</dd></center>
9th Jan 2017, 2:16 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 4
<center> align="left" text-align:right; vertical-align:middle; …… (many ways…)
9th Jan 2017, 1:09 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 2
Remember, the center tag is deprecated and you should not use it. Instead, use css, like the first example provided by Valentin or the one provided by Uran. I myself put always inline tags as inline-blocks, give them a width, and use margin: 0 auto; to center most of the things horizontally.
9th Jan 2017, 3:11 PM
CHMD
CHMD - avatar
+ 1
ul li { text-align: left | center | right; }
9th Jan 2017, 1:10 PM
Uran Kajtazaj
Uran Kajtazaj - avatar
+ 1
Thanks a lot for both of you. Would you please give me an example, Since I'm very new with HTML it would be very helpful to have one.
9th Jan 2017, 1:53 PM
Hamoud Bueno
Hamoud Bueno - avatar
+ 1
Thank you Valetinhacker! Just one favor to ask, would you please, please tell me how should I write the example down bellow so I will have it align to the center, and then to the right? <html> <head> <title>learning HTML </title> <body> <ul> <li> green </li> <li>blue </li> <li>yellow </li> <li>Black</li> <li>Brown</li> </ul> <ol> <li> green </li> <li>blue </li> <li>yellow </li> <li>Black</li> <li>Brown</li> </ol> </body> </head> </html>
9th Jan 2017, 2:44 PM
Hamoud Bueno
Hamoud Bueno - avatar
+ 1
Thank you ValentineHacker so much for the trick. :-) Although that's not the result that I was looking for, still the trick is so greaaaaaaat. what I want is the lists to be under each other on the right then under each other on the left and under each other on the center, not next to the other, would you tell me how can I do it, please?
9th Jan 2017, 3:18 PM
Hamoud Bueno
Hamoud Bueno - avatar
0
@KINGODX thank you so much. I'm very new at HTML, I don't know how would I use what you are saying to have a the code that you are talking about. :-(
9th Jan 2017, 3:25 PM
Hamoud Bueno
Hamoud Bueno - avatar
0
I want the two lists to be both present, and aligned beneath each other, and that's how I want the result to looks like on the browser 1----left 1.green 2.blue 3.yellow 4.Black 5.Brown -green -blue -yellow -Black -Brown 2-----Right 1.green 2.blue 3.yellow 4.Black 5.Brown -green -blue -yellow -Black -Brown 3-----Center 1.green 2.blue 3.yellow 4.black 5.Brown -green -blue -yellow -black And it seems that the center dont work with float
9th Jan 2017, 4:20 PM
Hamoud Bueno
Hamoud Bueno - avatar