CODEWITHSUNDEEP
htmlcentercentering
yoshyosh
yoshyosh

Reputation: 14086

How to center links in HTML

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!

Upvotes: 25

Views: 293419

Answers (8)

Shayan Imran
Shayan Imran

Reputation: 11

well, one really easy way is to just do the old-fashioned way and save the hassle by using. You can just change the margin-left or margin-right and the distance with the pixels in whichever way you prefer.

<a href:"#" style:"margin-left:"260px">Link</a>

Upvotes: 0

Stephen
Stephen

Reputation: 37

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>

Upvotes: 0

chris
chris

Reputation: 1

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>

Upvotes: -3

Ian David Bocioaca
Ian David Bocioaca

Reputation: 107

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/

Upvotes: 0

oezi
oezi

Reputation: 51817

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

Upvotes: 45

Quentin
Quentin

Reputation: 943949

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.

Upvotes: 4

charliegriefer
charliegriefer

Reputation: 3382

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>

Upvotes: 2

nonopolarity
nonopolarity

Reputation: 151126

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/

Upvotes: 3

Related Questions