How to center links in HTML
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
The <p> will show up on a new line. Try wrapping all of your links in one single <p> tag:
<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>
you would put them inside a <p>
or a <div>
<p style="text-align:center">
<a href="http//www.google.com">Search</a>
<a href="Contact Us">Contact Us</a>
</p>
sample: http://jsfiddle.net/X8HM4/1/
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.