How to center a URL in a html document

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 ?

4 answers

  • answered 2018-11-08 08:03 Aetheris

    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"

  • answered 2018-11-08 08:28 kapitan

    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.

  • answered 2018-11-08 08:29 Dushan

    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>
    

  • answered 2018-11-08 08:30 DEEPESH KUMAR R

    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