2

Alguém me consegue ajudar a centralizar os textos dos botões? Já tentei de tudo o que encontrei na internet e nada resulta.

inserir a descrição da imagem aqui

1

4 Respostas 4

4

Você pode usar 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>

1
  • Funcionou, muito obrigada! 26/02/2018 às 17:14
1

Você também pode fazer dessa forma:

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>

1

EDIT: Opção com transform: translate a vantagem dela é que vc não vai depender de valores fixos, pois ela sempre vai alinhar no centro do box, independente da altura e largura dele.

.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>


Exitem várias opções para centralizar elementos (horizontal e verticalmente). Sem o seu código fica difícil sugerir a melhor opção...

Minha sugestão, para ser diferente das demais já respondidas, é colocando o line-height com o mesmo valo do height do box

Veja o exemplo abaixo funcionando:

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

2
  • Ele fica centrado com esse código mas o problema é que depois não apresenta todo o texto que tenho no último botão e ele tem de presentar todo. 26/02/2018 às 17:12
  • Melissa editei minha resposta, agora olha o primeiro exemplo que dei na resposta, ele usa transform: translate e vai centralizar o que estiver dentro independente do tamanho elemento,
    – hugocsl
    26/02/2018 às 17:15
1

Você poderá tentar realizar desta forma.

.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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .