title: align texts or images in Bootstrap carousel
body: <p>I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel. </p>
  
  <p><img src="https://i.stack.imgur.com/C1nn5.jpg" alt="enter image description here"></p>
  
  <p>here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use <code>top: x, right: x</code> but every time when I resize the window, text climb above and not stay at middle anymore.</p>
  
  <p>CSS for align</p>
  
  <pre><code>.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 40%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  }
  </code></pre>
  
  <p>Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.</p>
  
  <p>In this <a href="http://themeforest.net/item/eco-nature-environment-ecology-html5-template/full_screen_preview/11656881" rel="nofollow noreferrer">exemple</a> text stay fixed on every device.</p>