[html] 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!

This question is related to html center centering

The answer is


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.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to center

Center Plot title in ggplot2 How to make a <div> or <a href="#"> to align center How to center an unordered list? Bootstrap 3 modal vertical position center How to align title at center of ActionBar in default theme(Theme.Holo.Light) How to center absolute div horizontally using CSS? Resize to fit image in div, and center horizontally and vertically Center fixed div with dynamic width (CSS) RelativeLayout center vertical Center button under form in bootstrap

Examples related to centering

Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning Centering in CSS Grid Bootstrap 4 Center Vertical and Horizontal Alignment Center a column using Twitter Bootstrap 3 How to horizontally align ul to center of div? How to center a <p> element inside a <div> container? Using margin:auto to vertically-align a div How to center body on a page? How to center a "position: absolute" element How to center a button within a div?