Alguém me consegue ajudar a centralizar os textos dos botões? Já tentei de tudo o que encontrei na internet e nada resulta.
4 Respostas
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>
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>
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>
-
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,– hugocsl26/02/2018 às 17:15
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>