How to center button text vertically [duplicate]

Navigation
2

Can someone help me centralize button texts? I've tried everything I found on the internet and nothing works.

    
asked by anonymous 26.02.2018 / 17:41

4 answers

3

You can use display: flex : 

.button{
   width: 157px;
   height: 95px;
   background: yellow;
   text-align: center;
   float: left;
   top: 50%;
   position: relative;

   /* flex para alinhar conteúdo*/
   display: flex;
   justify-content: center;
   align-items: center;
}
<div>
   <a class="button">Texto do link teste 2 teste 2</a>
</div>
    
26.02.2018 / 17:56
1

You can also do this: 

div {
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px;
  display: table;
  background-color: #aaa;
}

div > a {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
<div>
  <a href="#">Botão</a>
</div>

<div>
  <a href="#">Botão</a>
</div>

<div>
  <a href="#">Botão</a>
</div>
    
26.02.2018 / 17:58
1

EDIT: Option with transform: translate The advantage of it is that you will not depend on fixed values, because it will always align in the center of the box, regardless of height and width. > 

.box {
    width: 200px;
    height: 100px;
    background-color: tomato;
    position: relative;
}
.box span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div class="box">
    <span>Texto Item</span>
</div>

There are several options for centering elements (horizontally and vertically). Without your code it is difficult to suggest the best option ...

My suggestion, to be different from the ones already answered, is putting line-height with the same value as height of box

See the example below working: 

.box {
    width: 200px;
    height: 100px;
    background-color: aquamarine;
    line-height: 100px;
    text-align: center;    
}
<div class="box">
    <span>Texto Item</span>
</div>
    
26.02.2018 / 18:04
1

You can try this out. 

.flexbox-container {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   align-items: center;
}


<div class="flexbox-container">
      <a href="#">Teste do botão</a>
</div>
    
26.02.2018 / 18:19
How do I pass the address of the first char of a string to a function write to it? Child component, return to parent component REACT