How to vertically center a Bootstrap carousel-caption?

by

You can use the translateY function of the CSS property transform to vertically align elements. Browser support is quite decent, including IE9.
Therefore just add the following to your .carousel-caption CSS.

top: 50%;
transform: translateY(-50%);

Now you need to get rid of the extra bottom space, added by the default bootstrap CSS. Add the following as well to your .carousel-caption CSS.

bottom: initial;

And last but not least give the parent element, in this case .item, the following CSS to prevent blurry elements when it’s placed on half a pixel.

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

Working Example

More Related Contents:

  1. How To Create This Type of Structure in html css and bootstrap?
  2. vertical-align with Bootstrap 3
  3. Bootstrap row with columns of different height
  4. How can I override Bootstrap CSS styles?
  5. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  6. Bootstrap 4: Multilevel Dropdown Inside Navigation
  7. Twitter Bootstrap 3 Sticky Footer
  8. Extend bootstrap row outside the container
  9. How to center nav-items in Bootstrap? [duplicate]
  10. How to make Bootstrap 4 cards the same height in card-columns?
  11. Bootstrap – align button to the bottom of card
  12. Bootstrap: add margin/padding space between columns
  13. How to remove focus around buttons on click
  14. Bootstrap – 5 column layout
  15. Bootstrap 4 – Sticky footer – Dynamic footer height
  16. How to center content in a Bootstrap column?
  17. How to implement curve background in CSS? [duplicate]
  18. How do I add a margin between bootstrap columns without wrapping [duplicate]
  19. Bootstrap navbar: nothing is displayed on smaller devices
  20. Bootstrap 3 Glyphicons CDN
  21. Text-align class for inside a table
  22. What is the purpose of .row in Bootstrap? [duplicate]
  23. How to move placeholder to top on focus AND while typing?
  24. How to center buttons in Twitter Bootstrap 3?
  25. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  26. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  27. How can I make Bootstrap 4 columns all the same height? [duplicate]
  28. Changing image src depending on screen size
  29. How to work with ellipsis in bootstrap responsive table
  30. CSS float-right not working in Bootstrap 4 Navbar [duplicate]

Leave a Comment