How to Align Anchor Tag With Button in Center

How to align anchor tag with button in center

Working FIDDLE Demo

Why use button inside an a. You can use just a. And make text-align of parent to center.

<div class="center">
    <a href="#" class="downloadButton">Download</a>
</div>

And the CSS of parent:

.center { text-align: center; }

And set a padding for the link:

.downloadButton { padding: 7px 20px 8px 20px; }

Center a text link button

One option is to make the a a block element with a fixed width and auto margins:

a.promotion-btn {
  /* other styles */
  display: block;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

Another is to put the a inside a div with text-align: center:

<div class="center">
  <a href="#" class="promotion-btn">Download</a>
</div>

and

.center {
  text-align: center;
}

CSS: Vertical align text of anchor and button

This worked for me:

.btn{
   display: inline-flex;
   align-items: center;
}

How do I center an anchor element in CSS?

Add the text-align CSS property to its parent style attribute

Eg:

<div style="text-align:center">
  <a href="http://www.example.com">example</a>
</div>

Or using a class (recommended)

<div class="my-class">
  <a href="http://www.example.com">example</a>
</div>

.my-class {
  text-align: center;
}

See below working example:

.my-class {
  text-align: center;
  background:green;
  width:400px;
  padding:15px; 
}
.my-class a{text-decoration:none; color:#fff;}

<!--EXAMPLE-ONE-->
<div style="text-align:center; border:solid 1px #000; padding:15px;">
  <a href="http://www.example.com">example</a>
</div>

<!--EXAMPLE-TWO-->
<div class="my-class">
  <a href="http://www.example.com">example</a>
</div>

Vertical and horizontal align anchor element, area clickable 100% of parent

Solved it, thanks to @insertusernamehere, an <a/> inside a <button/> isn't valid HTML.
That helped simplify the markup to be an anchor tag that looks like and interacts as a button, instead of having nested elements.

--> simply set the anchor tag as a block-level element so you can specify width and height, then use line-height.

.medium-button__link {    display: block;    width: 200px;    height: 48px;      text-align: center;    line-height: 48px;    background: #3a66db;    color: #fff;    font-family: 'OpenSans-Regular';    font-size: 1em;    border-radius: 4px;    text-decoration: none;}

  <a class="medium-button__link" href="https://sirthisisawendys.com">    Clickable link</a>

center text and icon in a anchor tag

Try this simple css to align div vertically and horizontally.

.typeA {  width: 80%;  margin:auto;  height: 90vh;  align-items: center;    display: flex;}.typeA SPAN{  margin:auto;text-align:center;}

<div class="wrapper">  <a href="#" class="btn typeA">    <span>ABC <br>       <img src="https://placehold.it/60x60" alt="icon" style="width:60px;">    </span>  </a></div>

How to center text inside anchor tag

Add

text-align: center;
line-height: 28px;

working demo: http://jsfiddle.net/3SE8L/2/

How can I align a link to the center in html and css?

you need to add "text-align: center" to any parent tag in which the anchor tag is in.

if you have your anchor tags inside a div then add it to the div not the anchor tag.

example:

css:

    div{
        text-align: center;
    }

html:

<body>
    <div>
        <a href="#">this is a link</a>
    </div>
</body>

Center Vertically Anchor Tag in inline-block

You need to use flex property to center align anchor tag.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,300&family=Roboto+Mono&family=Roboto:wght@100;400&display=swap');

*{
    background-color: rgb(26, 26, 26);
    margin: 0;
    padding: 0;
}
body{
      display: flex;
      justify-content: center;
      align-items: center;
      height:100vh;
 }
a{
     display: flex;
     justify-content: center;
     align-items: center;
     width:200px;
    border: 1px solid rgb(255, 90, 90);
    color: rgb(255, 124, 124);
    background-color: rgb(255, 85, 85, 0.5);
    text-decoration: none;
    border-radius: 5px;
    padding: 1.5px 12px;
    text-transform: capitalize;
    font-family: 'Roboto Flex', Sans-Serif;
    font-size: xx-large;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
    <link rel="stylesheet" href="button.css">
</head>
<body>
   
    <center><a href="#" target="_blank"">Export</a>
</body>
</html>

How to Align Anchor Tag With Button in Center