Center tag in div

Question

Currently having an issue with my button. I want to be able to center my 'a' tag but at the moment it will only stick to the left side. I have tried using "display:block" but this will make my button take up the full width of any div it's been put in.

HTML:

<a href="#" class="button blue">Apply Now</a>

CSS:

.button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Apply css on div for center-align and give width as required — rahul, Feb 06 '17 at 10:23
text-align center should be applied to the parent element. @MHamzaJaved, that's some terrible advice - first one would make no difference, 2nd one, would start to make your css a maintenance nightmare — Pete, Feb 06 '17 at 10:25
You need to set `text-align: center;` on the surrounding container. This is not a very useful question as this obviously lacks the most basic efforts of research by OP. — connexo, Feb 06 '17 at 10:25

Pablo Salcedo T. · Accepted Answer · 2017-02-06T10:28:24.560

Use a div to center the link

.button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.container{
  width: 100%;
  text-align: center;
}

<div class="container">
  <a href="#" class="button blue">Apply Now</a>
</div>

score 4 · Answer 2 · answered Feb 06 '17 at 10:45

Use the text-align: center; on a parent element to center align all the child elements inside it. They(child elements) do not have to be block level elements for the same. Your question has the concern that you do not want to take up the full space of the parent div by using display:block on your a tag.

You don't have to, even if you specify display:inline-block on your a tag and wrap it inside a parent with text-align: center;, it will solve your task.

Alternatively, you can use margin-left:25% or so, in case the above answer does not suit your need.

Feel free to drop in the code in case you need more help on this.

Thanks,
Yaman

score 3 · Answer 3 · answered Jul 03 '20 at 15:56

3

I agree with Yaman, the easiest way I used is a < p > tag, just put it before and after your link

<p align="center">
    <a href="#" class="button blue">Apply Now</a>
</p>

answered Jul 03 '20 at 15:56

Francisco Carrasco

31
1

score 0 · Answer 4 · answered Aug 31 '21 at 03:16

the issue is simple. Just add a paragraph tag before the button and inside the tag, add the alignment. This should work

<p align="center">
              <a href="Student Voice\Student-Voice (Hello).html" title="Just A button" class="btn btn-default">Hi</a>

Avinash Patel · Answer 5 · 2022-02-16T07:24:58.280

0

If text-align: center does not work than You can add a style tag in the respective tag and use

justify-content: center;

edited Feb 16 '22 at 07:24

answered Feb 16 '22 at 07:13

Avinash Patel

1
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 16 '22 at 10:36

score -1 · Answer 6 · answered Jul 15 '23 at 16:25

-1

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

answered Jul 15 '23 at 16:25

fatemeh lohrasbi

3
2

Center tag in div

6 Answers6