Como alinhar textos dentro de divs

mruoppolo · Junho 18, 2016

Olá, tudo bem?

Minha dúvida, acredito que seja simples, eu preciso conseguir criar este layout aqui:

O mais próximo que consegui chegar, foi isso aqui:

O que não esta muito longe, mas não consigo centralizar este texto de jeito nenhum e o texto do primeiro quadro fica sendo comido na latera. O código que criei foi o seguinte:

HTML

<div id="rotas">
   <div class="container">
	<div class="row up-banner">
		<div class="col-md-offset-1 col-md-1 col-xs-6 text-center uppercase primeira"><a href="#"><p>ciclo introdutório</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase segunda"><a href="#"><p>GESTÃO DA INOVAÇÃO</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase terceira"><a href="#"><p>gestão de projetos</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase quarta"><a href="#"><p>recursos para inovacao</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase quinta"><a href="#"><p>GESTÃO DE P.I.</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase sexta"><a href="#"><p>inovação da pme</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase setima"><a href="#"><p>inovação baseada no mercado</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase oitava"><a href="#"><p>inovação baseada em tecnologia</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase nona"><a href="#"><p>negocios inovadores</p></a></div>
		<div class="col-md-1 col-xs-6 text-center uppercase decima"><a href="#"><p>inovacao aberta</p></a></div>
        </div>
   </div>
</div>

E o CSS é esse aqui:

#rotas div p{display:table-cell;vertical-align:middle;}
#rotas div a{text-align:center;font-family:ubuntu;font-size:12px;text-transform:uppercase !important;color:#fff;}
#rotas div.primeira{background-color:#F37021;padding-top:20px;min-height:120px;}
#rotas div.segunda{background-color:#EE1847;padding-top:20px;min-height:120px;}
#rotas div.terceira{background-color:#6F2C91;padding-top:20px;min-height:120px;}
#rotas div.quarta{background-color:#43B7B4;padding-top:20px;min-height:120px;}
#rotas div.quinta{background-color:#007C45;padding-top:20px;min-height:120px;}
#rotas div.sexta{background-color:#243E87;padding-top:20px;min-height:120px;}
#rotas div.setima{background-color:#0072BB;padding-top:20px;min-height:120px;}
#rotas div.oitava{background-color:#00C1F3;padding-top:20px;min-height:120px;}
#rotas div.nona{background-color:#51B847;padding-top:20px;min-height:120px;}
#rotas div.decima{background-color:#A6CE38;padding-top:20px;min-height:120px;}

Como eu posso corrigir os 2 erros??

Obrigado :D

hargon · Junho 18, 2016

Sugestão:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Fonte

mruoppolo · Junho 18, 2016

Não funcionou não :/

hargon · Junho 18, 2016

Já tentou utilizar o line-height na div? E o vertical-align: middle no conteúdo.

Se não, teste isso posta o resultado.

mruoppolo · Junho 19, 2016

Cara então, não funcionou a única coisa que funcionou foi eu trocar tudo para ul ao invés de div e definir um padding-top para cada um dos li usando aquele first-child e talz, o problema é que este tema, estou fazendo para o wordpress e isso ai é um menu, se o cliente resolver mudar o nome do menu vai ferrar tudo, por que ficou assim, os nomes que ficam em 1 linha coloquei 25px, 2 linhas 10px e 3 linhas 5px, mas se o cliente mudar o nome do menu que tem uma linha para um nome de 3 linhas, vai ferrar tudo.

A principio estou deixando assim, mas era bom eu conseguir alguma coisa que seja dinâmica, no momento o código é este aqui:

CSS

#rotas ul li a{text-align:center;font-family:ubuntu;font-size:12px;text-transform:uppercase !important;color:#fff;}
#rotas ul li a:hover{background-color:transparent !important;text-decoration: underline;}
#rotas ul li:first-child{background-color:#F37021;max-width:10%;height:100px;padding-top:10px;}
#rotas ul li:nth-child(2){background-color:#EE1847;max-width:10%;height:100px;padding-top:10px;}
#rotas ul li:nth-child(3){background-color:#6F2C91;max-width:10%;height:100px;padding-top:10px;}
#rotas ul li:nth-child(4){background-color:#43B7B4;max-width:10%;height:100px;padding-top:5px;}
#rotas ul li:nth-child(5){background-color:#007C45;max-width:10%;height:100px;padding-top:25px;}
#rotas ul li:nth-child(6){background-color:#243E87;max-width:10%;height:100px;padding-top:10px;}
#rotas ul li:nth-child(7){background-color:#0072BB;max-width:10%;height:100px;padding-top:5px;}
#rotas ul li:nth-child(8){background-color:#00C1F3;max-width:10%;height:100px;padding-top:10px;}
#rotas ul li:nth-child(9){background-color:#51B847;max-width:10%;height:100px;padding-top:10px;}
#rotas ul li:last-child{background-color:#A6CE38;max-width:10%;height:100px;padding-top:5px;}

HTML

<nav class="navbar up-banner">
			<div id="rotas">
				<div class="container">
					<div class="row">				
						<div class="menu-rotas-container">
<ul id="menu-rotas" class="nav navbar-nav navbar-left"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">Ciclo Introdutório</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">Gestão da Inovação</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#">Gestão de Projetos</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">Recursos para Inovação</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">Gestão da P.I</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Inovação da PME</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">Inovação Baseada no Mercado</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="#">Negócios Inovadores</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">Inovação Aberta</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#">Inovação Baseada em Tecnologia</a></li>
</ul>
</div>					</div>
				</div>
			</div>
		</nav>

L. Henrique · Junho 20, 2016

Marcello,

Alinhar texto é bem simples, você só vai precisar de line-height, vertical-align, display e width e height (talvez). Veja um exemplo que preparei aqui no JSFiddle.

Veja o código completo

HTML:

<div>
  <span>Essa é uma div com texto bem extenso</span>
</div>
<div>
  <span>Essa é outra div</span>
</div>
<div>
  <span>Div</span>
</div>
<div>
  <span>Essa é mais uma div</span>
</div>

CSS:

div {
  float: left;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
  div span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }

/* Ignorar */
div:first-child { background: black; color: white; }
div:nth-child(2) { background: blue; color: white; }
div:nth-child(3) { background: red; color: black; }
div:last-child { background: orange; color: black; }

A mágica acontece da seguinte forma:

A div possui width e height pré definidos, o que nos ajuda a definir o line-height.
O line-height da div faz com que todo o texto do span se separe (afinal, é espaçamento por linha), mesmo assim, isso deixa a primeira linha do texto no centro.
Text-align: center pra deixar o texto no centro, óbvio. E o vertical-align só pra prevenir.
No span, o display: inline-block define que todas as linhas são somente uma única.
E o line-height: normal é pra corrigir o empurrão que o line-height da div está dando. Deixando tudo no centro.

Abraços!

Maujor · Junho 20, 2016

Olá Marcello,
Pela sua HTML ficou claro que está usando o framework Bootstrap para construção do layout.

Na marcação não há necessidade de usar um elemento P para container dos textos dos links e também necessidade das classes text-center e uppercase para os elementos DIV;
Nas CSS as declarações repetidas min-height: 120px para DIV podem e devem ficar em declaração única;
É preciso ZERAR o padding nativo do Bootstrap para os elementos DIV;

Para obter o efeito como desejado reescreva a HTML e as CSS conforme mostrado a seguir:

Solução baseada no primeiro código, postado em 18 junho 2016 - 10:47

CSS

#rotas div {position:relative;min-height:120px;padding:0;}
#rotas div a {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
font:12px ubuntu;text-transform:uppercase;text-align:center;color:#fff;}
#rotas div.primeira{background-color:#F37021;}
#rotas div.segunda{background-color:#EE1847;}
#rotas div.terceira{background-color:#6F2C91;}
#rotas div.quarta{background-color:#43B7B4;}
#rotas div.quinta{background-color:#007C45;}
#rotas div.sexta{background-color:#243E87;}
#rotas div.setima{background-color:#0072BB;}
#rotas div.oitava{background-color:#00C1F3;}
#rotas div.nona{background-color:#51B847;}
#rotas div.decima{background-color:#A6CE38;}

HTML

<div id="rotas">
<div class="container">
<div class="row up-banner">
<div class="col-md-offset-1 col-md-1 col-xs-6 primeira"><a href="#">ciclo introdutório</a></div>
<div class="col-md-1 col-xs-6 segunda"><a href="#">GESTÃO DA INOVAÇÃO</a></div>
<div class="col-md-1 col-xs-6 terceira"><a href="#">gestão de projetos</a></div>
<div class="col-md-1 col-xs-6 quarta"><a href="#">recursos para inovacao</a></div>
<div class="col-md-1 col-xs-6 quinta"><a href="#">GESTÃO DE P.I.</a></div>
<div class="col-md-1 col-xs-6 sexta"><a href="#">inovação da pme</a></div>
<div class="col-md-1 col-xs-6 setima"><a href="#">inovação baseada no mercado</a></div>
<div class="col-md-1 col-xs-6 oitava"><a href="#">inovação baseada em tecnologia</a></div>
<div class="col-md-1 col-xs-6 nona"><a href="#">negocios inovadores</a></div>
<div class="col-md-1 col-xs-6 decima"><a href="#">inovacao aberta</a></div>
</div>
</div>
</div>

codercss · Junho 25, 2016

Marcello,

Alinhar texto é bem simples, você só vai precisar de line-height, vertical-align, display e width e height (talvez). Veja um exemplo que preparei aqui no JSFiddle.

Veja o código completo

HTML:
<div>
  <span>Essa é uma div com texto bem extenso</span>
</div>
<div>
  <span>Essa é outra div</span>
</div>
<div>
  <span>Div</span>
</div>
<div>
  <span>Essa é mais uma div</span>
</div>
CSS:
div {
  float: left;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
  div span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }

/* Ignorar */
div:first-child { background: black; color: white; }
div:nth-child(2) { background: blue; color: white; }
div:nth-child(3) { background: red; color: black; }
div:last-child { background: orange; color: black; }
A mágica acontece da seguinte forma:

A div possui width e height pré definidos, o que nos ajuda a definir o line-height.

O line-height da div faz com que todo o texto do span se separe (afinal, é espaçamento por linha), mesmo assim, isso deixa a primeira linha do texto no centro.

Text-align: center pra deixar o texto no centro, óbvio. E o vertical-align só pra prevenir.

No span, o display: inline-block define que todas as linhas são somente uma única.

E o line-height: normal é pra corrigir o empurrão que o line-height da div está dando. Deixando tudo no centro.

Abraços!

Nesse exemplo o que faz o vertical-align? Pelo que entendo ajusta a posição na vertical!

Experimentei (https://jsfiddle.net/mqc11zaf/) alterar o tamanho das div's e tive que mexe no height e no line-height, mas caso anule o vertical-align: middle não resulta em diferença alguma.

Obrigado

Maujor · Junho 25, 2016

Consulte um tutorial explicando as técnicas CSS para centrar na vertical, horizontal e ambas as direções.

Arquivado

Como alinhar textos dentro de divs

Recommended Posts

mruoppolo 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

hargon 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

mruoppolo 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

hargon 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

mruoppolo 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

codercss 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Fóruns

Tempo Real

Informação importante