CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
hope
hope

Reputation: 117

align texts or images in Bootstrap carousel

I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.

enter image description here

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 top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.

CSS for align

.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);
}

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.

In this exemple text stay fixed on every device.

Upvotes: 2

Views: 1872

Answers (2)

AngularJR
AngularJR

Reputation: 2762

Hope, Try this demo that centers text vertically in the Bootstrap carousel.

Here is the Fiddle.

All I do here is give the div a height that contains the text and then position it with this css... 

.vcenter {
    position: absolute;
    height:100px;
    width:100%;
    top:50%;
    bottom:50%;
    margin-top: -50px; 
    margin-bottom: -50px;
}

Upvotes: 0

Graham
Graham

Reputation: 162

<div class="wrap">
    <div class="display-table">
        <div class="display-cell">
           <h1>Title in here</h1>
        </div>
    </div>
</div>

<style>
.wrap {
    width:            100%;
    height:           400px;
}
.display-table {
    width:            100%;
    height:           100%;
    display:          table;
}
.display-cell {
    width:            100%;
    height:           100%;
    display:          table-cell;
    vertical-align:   middle;
}
</style>

This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!

Hope this helps :)

Upvotes: 1

Related Questions