-1

I want to center automatically a div on my paga using bootstrap 3 but I cannot achieve it. I got an image (with a fixed responsive height) and I want the text to be centered (horizontally and verticaly)

I've made a bootly : https://www.bootply.com/4AyZFwlOdE

Kaherdin
  • 2,055
  • 3
  • 23
  • 34
  • 1
    Also, have a look at the answers already given on the website: https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div?rq=1 – Adriano Dec 05 '17 at 11:37
  • 1
    Possible duplicate of [How to vertically align an image inside a div?](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) and a multitude of same questions, that should also be closed, found by searching SO but you are required to post your markup here inside your question, not a bootply or any other third party site. [mcve] – Rob Dec 05 '17 at 14:06

4 Answers4

0

.vcenter {
   display: inline-block;
   vertical-align: middle;
   float: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.image {
    height:500px;
    background:yellow;
  }
  
<div class="image">
  <div class="container">
      <div class="row">
          <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
            <div style="text-align:center; height:3em;border:1px solid #F00">Small</div>
          </div>
      </div>
    </div>
  </div>
Adriano
  • 3,788
  • 5
  • 32
  • 53
0
<div class="image">
  <div class="container">
      <div class="row align-items-center">
        <div class="col-xs-8  col-lg-8 col-md-offset-2" >
            <div style=" border:1px solid #F00;"><img src="http://www.dm-3.com/wp-content/uploads/2013/06/example.png" stlye="margin:0 auto"></div>
          </div>
      </div>
    </div>
  </div>
Bora Erbasoglu
  • 107
  • 1
  • 5
0

CSS

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    line-height: 3em;
    text-align:center;
    height:3em;
    border:1px solid #F00;
}

.image {
    height:500px;
    background:yellow;
}

https://www.bootply.com/uAp4vN69nk

Mittal Patel
  • 2,732
  • 14
  • 23
0

Different ways of aligning content in the center(horizontal and vertical) given in the codepen link below:

.style2{
  display: table;
  width: 100%;
  height: 30vh;
  background-color: #8E113F;
  margin-bottom: 20px;
  div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
  }
}

https://codepen.io/kk2989/pen/LNjojY

kanchan khurana
  • 1
  • 1