0

Hi everyone I'm a beginner in HTML, and I need to know how to center an URL inside my web page, for example : 

<a href="http://www.google.com"> Click Here to Open Google </a>

I tried to use the tag, and the STYLE attribute but it doesn't work.

Can some one help me to make it please ?

Дак Хона
  • 3
  • 3

4 Answers4

2

You could try in your css file:

a {display:block;text-align:center}

Hope this helps, personally I would add a class name to your a link such as google-link, otherwise this a style will effect all future anchor links :)

So in html file:

<a href="www.google.com" class="google-link">Click here to open google</a>

Then in css file: 

.google-link {display:block;text-align:center}

In addition your href needs to include a = after it: href="www.google.com"

Ben Swindells
  • 269
  • 3
  • 12
1

i think the reason is because your DOM only covers the width of your text link which is "Click Here to Open Google". so centering it with the "center" tag will not give what you want.

Please try this:

<div style='width:100%; text-align:center;'><a href="http://www.google.com"> Click Here to Open Google </a>

Explanation is, you created a "div" element and gave it a 100% width, then specify that anything inside it will be center aligned.

kapitan
  • 2,008
  • 3
  • 20
  • 26
1

This will solve your problem. Kindly check the codepen link for demo:

https://codepen.io/deepesh316/pen/jQWRYy

For more info about css display block, you can refer w3 schools link: 

https://www.w3schools.com/cssref/pr_class_display.asp
0

You can simply try this solution. In above, your href should look like below code and then you can use style which will center your link.

<a href:"http://www.google.com" style="text-align:center"> Click Here to Open Google <\a>

Or else you can try 

<div text-align="center">your link code here(<a href="your link"> </a>)......</div>
Dushan
  • 1,365
  • 20
  • 26