Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center links in HTML

Tags:

I am really new to HTML and was wondering how you center multiple links with html?

I have been trying :

  <a href="http//www.google.com"><p style="text-align:center">Search</a> 

But the problem is when I try to put other links behind it for example:

 <a href="http//www.google.com"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p> 

It just places them on separate lines. I believe this is happening because of the <p> 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!

like image 906
yoshyosh Avatar asked Nov 29 '10 09:11

yoshyosh


People also ask

How do you center a link in HTML tag?

1) Centering links by putting it inside of a text aligned div. Place the HTML link inside of a div. In the styles for the div, apply text-align:center and make the anchor tag an inline-block (display:inline-block).


1 Answers

there are some mistakes in your code - the first: you havn't closed you p-tag:

<a href="http//www.google.com"><p style="text-align:center">Search</p></a> 

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:

<a href="http//www.google.com"><span style="text-align:center">Search</span></a> 

but if you just want to add a style to your link, why don't you set the style for that link directly:

<a href="http//www.google.com" style="text-align:center">Search</a> 

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:

<div style="text-align:center">       <a href="http//www.google.com">Search</a>   <!-- more links here --> </div> 

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
like image 158
oezi Avatar answered Sep 28 '22 05:09

oezi