3

Estou tentando alinhar o texto ao centro da tela, tentei usar o transform:translateY(-50%) com o top:50% em position:absolute, porém não funcionou, gostaria de saber como faço para arrumar isso, e se possível, algum exemplo funcional.

*A margem no topo do elemento diminui ao diminuir a largura da tela, mesmo que aumente ou não a altura.

#carrossel-principal{
    	position:relative;
    	height:100%;
    	overflow-y:hidden;
    }
    .carousel-caption{
    	font-family:"Open Sans",sans-serif;
    	overflow-y:hidden;
    	box-sizing:border-box;
    	padding:0;
    	position:absolute;
    	top:0;
    	height:100%;
    }
    .caption-holder{
    	vertical-align:middle;
    	position:absolute;
    	width:100%;
    	padding:0;
    	margin-top:50%;
    	transform:translateY(-50%);
    }
<div id="carrossel-principal" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
   <div class="item active">
      <img src="img/banner_1.jpeg" alt="banner 1">
      <div class="carousel-caption">
         <div class="caption-holder">
            <h2>Nossa missão é fazer o bem!</h2>
            <p>Você também pode nos ajudar</p>
         </div>
      </div>
   </div>
   <div class="item">
      <img src="img/banner_2.jpg" alt="banner 2">
      <div class="carousel-caption">
         <div class="caption-holder">
            <h2>Doar é mais do que abrir mão de algo</h2>
            <p>é estender a mão a alguém</p>
         </div>
      </div>
   </div>
   <div class="item">
      <img src="img/banner_3.jpg" alt="banner 3">
      <div class="carousel-caption">
         <div class="caption-holder">
            <h2>Se você não tem nada para doar</h2>
            <p>Doe um gesto de carinho a quem precisa</p>
         </div>
      </div>
   </div>
</div>
  </div>

0

3 Respostas 3

4

lembrando que a propriedade top, left, right e bottom são referentes ao elemento pai, então para ter o comportamento esperado, este deve ocupar toda a pagina.:

html, body {
    position: relative;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

Segundo ponto, você não vai centralizar o texto, mas sim uma div ou outro elemento html. apenas se atente ao fato que ele precisa ser um filho direto do body.

A sua regra de CSS está certa para o alinhamento vertical.:

div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

para o alinhamento horizontal, você irá usar a propriedade left e translateX.

div {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

se quiser centralizar o conteúdo na pagina, deve combinar as duas regras.

html, body {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  padding: 5px;
  width: 360px;
  background-color: white;
  box-shadow: 0px 0px 5px black;
  border-radius: 5px;
}
<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium sem in dolor aliquet, sed ornare sapien ultrices. Pellentesque libero felis, cursus faucibus cursus efficitur, cursus ac leo. Sed posuere.</div>

1
  • obrigado pela resposta, mas quero alinhar o texto, e não a box :/ 9/01/2017 às 13:07
4

Essencialmente já foi respondido na pergunta qual a melhor forma de centralizar um elemento vertical e horizontalmente?, ainda que o AP diga que precisa "alinhar o texto", no código postado esse "texto" encontra-se dentro de um elemento.

Além das soluções apresentadas aqui, dependendo do suporte que está dando, pode utilizar caixas flexíveis:

div {
  align-items: center;
  justify-content: center;
  flex-direction: column; 
  display: flex;
  
  /* Regras somente para exibir a caixa,
     ñ tem importância para centralizar o texto.
   */
  height: 350px;
  background: rgba(0,0,0,.1)
}

div h2 {
  display: inline-block
}
<div>
  <h2>Doar é mais do que abrir mão de algo</h2>
  <p>é estender a mão a alguém</p>
</div>

6
  • mas assim o texto fica um ao lado do outro, tentei usar o flex-direction mas ele joga o texto pro topo da página 9/01/2017 às 13:32
  • 1
    Ta, e como é pra ficar? Editei a resposta. 9/01/2017 às 13:42
  • no caso seria um texto em cima do outro, centralizados numa div de 100% de altura, ou apenas centralizados na tela mesmo, podendo ser pelo elemento em que se encontram 9/01/2017 às 13:48
  • Está assim já... 9/01/2017 às 13:52
  • 1
    Bom, o snippet ta aí, se você tem outra regra interferindo não posso fazer muita coisa sem informação nenhuma. :) 9/01/2017 às 15:37
3

Pegue apenas o CSS.

#carrossel-principal {
  position: relative;
  height: 100%;
  overflow-y: hidden;
}
#carrossel-principal .item {
  position: relative;
}
.carousel-caption {
  font-family: "Open Sans", sans-serif;
  overflow-y: hidden;
  box-sizing: border-box;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  font-size: 14px;
}
.caption-holder {
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: table;
}
<div id="carrossel-principal" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="banner 1">
      <div class="carousel-caption">
        <div class="caption-holder">
          <h2>Nossa missão é fazer o bem!</h2>
          <p>Você também pode nos ajudar</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="banner 2">
      <div class="carousel-caption">
        <div class="caption-holder">
          <h2>Doar é mais do que abrir mão de algo</h2>
          <p>é estender a mão a alguém</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="banner 3">
      <div class="carousel-caption">
        <div class="caption-holder">
          <h2>Se você não tem nada para doar</h2>
          <p>Doe um gesto de carinho a quem precisa</p>
        </div>
      </div>
    </div>
  </div>
</div>

1
  • não rodou, continua do mesmo jeito, vou testar nos outros browsers :) obg pela atenção 9/01/2017 às 13:04

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