How to center links in HTML

Question

I am really new to HTML and was wondering how you center multiple links with html   I have been trying       lt a href  http  www google com  gt  lt p style  text-align center  gt Search lt  a gt    But the problem is when I try to put other links behind it for example     lt a href  http  www google com  gt  lt p style  text-align center  gt Search lt  a gt  lt a href  Contact Us  gt  lt p style  text-align center  gt Contact Us lt  a gt  lt  p gt    It just places them on separate lines  I believe this is happening because of the  lt p gt  function   but I only know HTML  I know you can do it in CSS but I was wondering if it can be done using just HTML   Thanks for any help

User · Answer

you would put them inside a  lt p gt  or a  lt div gt    lt p style  text-align center  gt       lt a href  http  www google com  gt Search lt  a gt        lt a href  Contact Us  gt Contact Us lt  a gt   lt  p gt    sample  http   jsfiddle net X8HM4 1

User · Answer

The  lt p gt  will show up on a new line   Try wrapping all of your links in one single  lt p gt  tag    lt p style  text-align center   gt  lt a href  http  www google com  gt Search lt  a gt  lt a href  Contact Us  gt Contact Us lt  a gt  lt  p gt

User · Answer

p is not how you put text in a  That is the problem  The only solution is to put the text between  lt a gt  and  lt  a gt   For example   lt a href  quot https   stackoverflow com posts 64201994 edit quot  style  quot text-align center  quot  gt Stack Overflow lt  a gt

User · Answer

Try doing a nav element with a ul element   Mine has a main above but I don t think you need it    lt main gt   lt nav gt   lt ul gt  lt li gt  lt a href  http  www google com  gt search lt  a gt   lt li gt  lt a href  http  www google com  gt search lt  a gt   lt li gt  lt a href  http  www google com  gt search lt  a gt    The code is something like this  When ever I put in the code it wouldn t work right so you need to fill in the blank  then center it   main nav ul gt  li gt  a gt   href  link of choice  name of link  a gt

User · Answer

there are some mistakes in your code - the first  you havn t closed you p-tag    lt a href  http  www google com  gt  lt p style  text-align center  gt Search lt  p gt  lt  a gt    next  p stands for  paragraph  and is a block-element  so it s causing a line-break   what you wanted to use there is a span  wich is just an inline-element for formatting    lt a href  http  www google com  gt  lt span style  text-align center  gt Search lt  span gt  lt  a gt    but if you just want to add a style to your link  why don t you set the style for that link directly    lt a href  http  www google com  style  text-align center  gt Search lt  a gt    in the end  this would at least be correct html  but still not exactly what you want  because text-align center centers the text in that element  so you would have to set that for the element that contains this links  this piece of html isn t posted  so i can t correct you  but i hope you understand  - to show this  i ll use a simple div    lt div style  text-align center  gt         lt a href  http  www google com  gt Search lt  a gt     lt  -- more links here -- gt   lt  div gt    EDIT  some more additions to your question    p is not a  function   but you re right  this is causing the problem  because it s a block-element  what you re trying to use is css - it s just inline instead of being placed in a seperate file  but you aren t doing  just HTML  here

User · Answer

Since you have a list of links  you should be marking them up as a list  and not as paragraphs    Listamatic has a bunch of examples of how you can style lists of links  including a number that are vertical lists with each link being centred  which is what you appear to be after   It also has a tutorial which explains the principles    That part of the styling essentially boils down to  Set text-align  center on an element that is displaying as a block which contains the link text   that could be the anchor itself  if you make it display as a block  or the list item containing it

User · Answer

One solution is to put them inside  lt center gt   like this    lt center gt   lt a href  http  www google com  gt Search lt  a gt   lt a href  Contact Us  gt Contact Us lt  a gt   lt  center gt    I ve also created a jsfiddle for you  https   jsfiddle net 9acgLf8e

[html] How to center links in HTML

Examples related to html

Examples related to center

Examples related to centering