Text alignment vertically [duplicate]

Navigation
3

I'm trying to align text to the center of the screen, I tried to use transform:translateY(-50%) with top:50% in position:absolute , but it did not work, I'd like to know how to sort it, and if possible, some functional example.

* The margin at the top of the element decreases by decreasing the width of the canvas, whether or not it increases the height. 

#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>
    
asked by anonymous 09.01.2017 / 13:37

3 answers

4

remembering that the property top , left , right and bottom are referring to the parent element, so to have the expected behavior, this should occupy the entire page.: 

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

Second point, you will not center the text, but a div or another html element. just be aware that it needs to be a direct child of body .

Your CSS rule is right for vertical alignment.: 

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

For horizontal alignment, you will use the property left and translateX . 

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

If you want to center the content on the page, you should combine the two rules. 

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>
    
09.01.2017 / 13:59
4

Essentially I've already answered the question how best to center an element vertically and horizontally? , even though the AP says that it needs to "align the text", in the code posted this "text" is inside an element.

In addition to the solutions presented here, depending on the support you are giving, you can use flexible boxes : 

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>
    
09.01.2017 / 14:14
3

Take only 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>
    
09.01.2017 / 13:52
How can I see the structure of a table in SQLite? How to convert an int number to string in python?