Texto central do CSS (horizontal e verticalmente) dentro de um bloco div
tenho um {[[0]} programado para display:block
. (90px
height
e tenho uma mensagem lá dentro.
preciso que o texto esteja alinhado no centro, tanto vertical como horizontalmente.
Já tentei, mas não faz a parte horizontal, por isso tentei, mas não funcionou. Alguma ideia?24 answers
Se é uma linha de texto e / ou imagem, então é fácil de fazer. Basta utilizar
text-align: center;
vertical-align: middle;
line-height: 90px; /* the same as your div height */
É isso. Se pode ser linhas múltiplas, então é um pouco mais complicado. Mas há soluções em http://pmob.co.uk / procura "alinhamento vertical".
Já que tendem a ser hackers ou a adicionar divs complicados... Costumo usar uma mesa com uma única célula para o fazer... para torná-lo o mais simples possível.
Actualização para 2016 / 2017:
Pode ser mais comumente feito comtransform
, e funciona bem mesmo em navegadores mais antigos, como IE10 e IE11. Pode suportar várias linhas de texto:
position: relative;
top: 50%;
transform: translateY(-50%);
Exemplo: https://jsfiddle.net/wb8u02kL/1/
Para diminuir a espessura:
A solução acima usou uma largura fixa para a área de conteúdo. Para usar a largura da linha de encolhimento, use
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Exemplo: https://jsfiddle.net/wb8u02kL/2/
Eu tentei flexbox, mas não era tão amplamente suportado, pois iria entrar. algumas versões mais antigas do IE, como o IE10.Técnicas comuns a partir de 2014:
-
Aproximação 1 -
transform
translateX
/translateY
:Exemplo Aqui / Tela Cheia Exemplo
Em navegadores suportados (a maioria deles), pode usar
top: 50%
/left: 50%
em combinação comtranslateX(-50%) translateY(-50%)
para centralizar dinamicamente vertical / horizontalmente o elemento..container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
-
Método de aproximação 2-Flexbox:
Exemplo Toma. / Exemplo De Ecrã Completo
Em navegadores suportados, definir o
display
do elemento alvo emflex
e utilizaralign-items: center
para o centro vertical ejustify-content: center
para o centro horizontal. Apenas não se esqueça de adicionar prefixos do fornecedor para suporte adicional ao navegador ( ver exemplo ).html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }
-
Aproximação 3 -
table-cell
/vertical-align: middle
:Exemplo Aqui / Ecrã Completo Exemplo
Em alguns casos, terá de assegurar que o
html
/body
a altura do elemento está definida em100%
.Para o alinhamento vertical, definir o elemento-mãe
width
/height
a100%
e adicionardisplay: table
. Então, para o elemento criança, mude odisplay
paratable-cell
e adicionevertical-align: middle
.Para a centralização horizontal, pode adicionar
text-align: center
ao centro do texto e de quaisquer outros elementos para crianças. Em alternativa, pode usarmargin: 0 auto
assumindo que o elemento éblock
nivel.html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }
-
Aproximação 4-posição absoluta
50%
do topo com deslocamento:Exemplo Aqui / Tela Cheia Exemplo
Esta abordagem assume que o texto tem uma altura conhecida - neste caso,
18px
. Apenas posicione absolutamente o elemento50%
do topo, em relação ao elemento pai. Use um valormargin-top
negativo que é metade da altura conhecida do elemento, neste caso --9px
.html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }
-
Aproximação 5-método
line-height
(menos flexível - não sugerido):Exemplo Aqui
Em alguns casos, o elemento-mãe terá uma altura fixa. Para a centralização vertical, tudo o que tem de fazer é definir um valor
Embora esta solução funcione em alguns casos, vale a pena notar que não funcionará quando houver vários linhas de texto - assim.line-height
no elemento-filho igual à altura fixa do elemento-mãe..parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }
Os métodos 4 e 5 não são os mais fiáveis. Escolhe um dos três primeiros.
Usando flexbox/ CSS:
<div class="box">
<p>അ</p>
</div>
O CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
Retirado de dica rápida: a forma mais simples de centrar os elementos verticalmente e horizontalmente
Adicione a linha display: table-cell;
ao seu css para esse div.
apenas as células da tabela suportam o vertical-align: middle; mas você pode dar essa definição de [table-cell] para o div..
Exemplo Vivo aqui: http://jsfiddle.net/tH2cc/
div{
height:90px;
width:90px;
text-align:center;
border:1px solid silver;
display: table-cell; // this says treat this element like a table cell
vertical-align:middle; //now we can center vertically like in a TD
}
Uso sempre o seguinte CSS para um contentor, para centrar o seu conteúdo horizontal e verticalmente.
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
Veja Isto em acção aqui: https://jsfiddle.net/yp1gusn7/
Podes tentar um código muito fácil para isto
display:flex;
align-items: center;
justify-content:center;
.box{
height:90px;
width:90px;
background:green;
display:flex;
align-items: center;
justify-content:center;
}
<div class="box">
Lorem
</div>
Codpen link http://codepen.io/santoshkhalse/pen/xRmZwr
Dá esta classe css ao alvo
.centered {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: red; /* not necessary just to see the result clearly */
}
<div class="centered">This text is centered horizontally and vertically</div>
Aproximação 1
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Aproximação 2
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
Aproximação 3
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
#parent
{
display:table;
}
#child
{
display:table-cell;
width:100%; //as large as its parent to center the text horizontally
text-align: center;
vertical-align:middle;//vertically align this element on its parent
}
<div class="small-container">
<span>Text centered</span>
</div>
<style>
.small-container {
width:250px;
height:250px;
border:1px green solid;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.small-container span{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
Uma das melhores abordagens é usar a propriedade flex no div-mãe e adicionar margem: propriedade automática a tag do elemento
.parent{
display: flex;
flex-direction: column;
flex: 1;
height:100%;
}
p{
margin:auto;
}
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Isto funciona para mim (testada ok!)
Html:
<div class="mydiv">
<p>Item to be Centered!</p>
</div>
Css:
.mydiv {
height: 100%; /* or other */
position: relative;
}
.mydiv p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%); /* to compensate own width and height */
}
Pode escolher outros valores depois 50% fi. 25% para centro a 25% dos Pais
Ajustar a altura da linha para obter o alinhamento vertical.
line-height: 90px;
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<!DOCTYPE html>
<html>
<head>
<style>
.container{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
justify-content: center;
width: 100%;
}
p{
font-size:24px;}
</style>
</head>
<body>
<div class="container">
<p>hello world</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.maindiv{
height:450px;
background:#f8f8f8;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
p{
font-size:24px;}
</style>
</head>
<body>
<div class="maindiv">
<h1>Title</h1>
</div>
</body>
</html>
Pode tentar os seguintes métodos:
1. Se você tem uma única palavra ou uma frase de linha, então o seguinte código pode fazer o truque.
Tem um texto dentro de uma etiqueta div e dá-lhe uma identificação. Defina as seguintes propriedades para esse id.
id-name {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed red;
}
Nota: Certifique-se de que a propriedade da altura da linha é igual à altura da divisão.
Mas, se o conteúdo for mais do que uma única palavra ou uma linha, então isto não funciona. Além disso, haverá momentos em que você não pode especificar o tamanho de um divison em PX ou %.(quando o divison é realmente pequeno e você quer que o conteúdo seja exatamente no meio)
2.Para resolver este problema, podemos tentar a seguinte combinação de propriedades.
id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}
Estas 3 linhas de código definem o conteúdo exactamente no meio de uma divisão (independentemente do tamanho da visualização). O "alinhar-itens: centro" ajuda na centralização vertical enquanto "justify-content: center" irá torná-lo horizontalmente centrado.
Nota: Flex não funciona em todos os navegadores. Certifique-se que adiciona os prefixos apropriados do fornecedor para o suporte adicional do navegador.
Aplicar o estilo:
position: absolute;
top: 50%;
left: 0;
right: 0;
O teu texto seria centrado independentemente do seu comprimento.
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
<div class="cell-row">
<div class="cell cell-middle">Center</div>
</div>
.center-stuff{
text-align: center;
vertical-align: middle;
line-height: 230px;/*This should be the div height*/
}
Tente o seguinte exemplo. Adicionei exemplos para cada categoria: horizontal e vertical
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal
{
text-align: center;
}
#vertical
{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div id ="horizontal">Center horizontal text</div>
<div id ="vertical">Center vertical text</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style ="text-align: center;">Center horizontal text</div>
<div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
</body>
</html>
footer {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
}