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!
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/
One solution is to put them inside <center>
, like this:
<center>
<a href="http//www.google.com">Search</a>
<a href="Contact Us">Contact Us</a>
</center>
I've also created a jsfiddle for you: https://jsfiddle.net/9acgLf8e/
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>
p
is not how you put text in a
. That is the problem. The only solution is to put the text between <a>
and </a>
. For example:
<a href="https://stackoverflow.com/posts/64201994/edit" style="text-align:center;">Stack Overflow</a>
Try doing a nav
element with a ul
element. Mine has a main
above but I don't think you need it.
<main>
<nav>
<ul><li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>
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> li> a>: href="link of choice":name of link:/a>
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.
Source: Stackoverflow.com