i don't succeed to align verticaly the text inside tag

Question

i can't align verticaly the text inside the a tag as you can see here.

navigation-item__link {
  color: #000;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}

<a class="navigation-item__link" href="/auth">Login</a>

also tried with,

vertical-align: middle;

but it also didn't work.
any help is appreciated.

https://stackoverflow.com/a/61374450/10634638 – estinamir Apr 22 '20 at 20:30 — estinamir, Apr 22 '20 at 20:30

Robin · Answer 1 · 2020-04-16T23:04:30.193

0

Look at my sample code, i hope you can understand and please provide necessary code.

UPDATE: wrap your a tag with a div and give flex properties to that div.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
}

<div class="wrapper">
  <a href="/auth">Login</a>
</div>

edited Apr 16 '20 at 23:04

answered Apr 16 '20 at 22:38

Robin

4,902
2
27
43

i tried to do it its just not working for some reason. also i edited the question – gdsd asgga Apr 16 '20 at 22:53
@gdsdasgga you want to "Login" in center vertically ? – Robin Apr 16 '20 at 22:59
yes. its not exactly in the center. i realy dont know why, the flex thing should have worked – gdsd asgga Apr 16 '20 at 23:01
uh didn't know that, do you have an idea what will work here? – gdsd asgga Apr 16 '20 at 23:10
What about adding more padding bottom .wrapper{padding-bottom:7px} or reduce line height .wrapper{line-height:15pix;} – estinamir Apr 16 '20 at 23:17
I tried also to wrap with div and gave it flex properties but it also didnt work – gdsd asgga Apr 16 '20 at 23:17
i can easly fix that with padding but i think its kinda ugly, im looking for something more elegent, maybe there is no other solution and thats what should do. – gdsd asgga Apr 16 '20 at 23:19

score 0 · Answer 2 · answered Apr 16 '20 at 23:11

As Robin says you must place your inside a div and assign those properties and height and width to the parent, the Robin answer doesn't have a height for that reason you can't see it centered

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
  height: 200px;
}

<div class="wrapper">
  <a href="/auth">Login</a>
</div>

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
}

<div class="wrapper">
  <a href="/auth">Login</a>
</div>

its also not working, gave it height of 100%. its still not centered inside the a tag. — gdsd asgga, Apr 16 '20 at 23:21

Ezra Siton · Accepted Answer · 2020-04-17T09:43:10.837

In general, for basic button no need to use flexbox.

For horizontally align change the display from display: inline (default value) to display block and add text-align center.

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

<a class="navigation-item__link" href="/auth">Login</a>

Sometimes you want to align inline-block buttons - the most simple way to do this is by extra text-align:center wrapper.

a{
  display: inline-block;
  padding: 10px 15px;
  background: lightgray;
  line-height: 1;
  
}

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

<div class="align-center">
   <a class="navigation-item__link" href="/auth">Log in</a>
   <a class="navigation-item__link" href="/auth">Sing up</a>
   <br><br>
   <a style="display: block;" class="navigation-item__link" href="/auth">Back</a>
 </div>

For V-align - use padding-top/bottom (Easier to manage space like this and not by flexbox or height/min-height): https://www.w3schools.com/css/css3_buttons.asp

a{
  display: block;
  text-align: center;
  background: lightgray;
  padding: 10px 15px;
}

<a class="navigation-item__link" href="/auth">Login</a>

If you want to align the button to some "card" flexbox is very useful.

a{
  display: block;
  text-align: center;
  background: lightgray;
  padding: 10px 25px;
}

.flex-align-v-h{
  min-height: 100vh;
  background: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1{
  text-align: center;
}

<section class="flex-align-v-h">
  <div>
    <h1>Hello</h1>
    <a class="navigation-item__link" href="/auth">Login</a> 
  </div>
</section>

If the text does not align to the button inspect element (Maybe your styles inherit extra top/bottom margin/padding).

i don't succeed to align verticaly the text inside tag

3 Answers3