CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jiroscopes
Jiroscopes

Reputation: 555

How to Vertically center a Boostrap Column

I want to center this text vertically and horizontally inside a container, it is within a row and a column that is set to 12. But I can only get it to center horizontally and not vertically. I tried Flex but it moves all objects in the page to center, where I want just this one to center.

HTML:

 <div class="container-fluid home">

   <div class="row">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>

   </div>

CSS:

.home {
  height: 100%;
  background-image: url(images/home.png);
}

 #text {

   text-align:center;
 }

Upvotes: 1

Views: 260

Answers (2)

Gaurav Arora
Gaurav Arora

Reputation: 11

You can simply do this with css's transform property. But you have to make sure that your main container has a defined height like:

.home{height: 1000px;
}

or anything else, but in this case 100% height will not work as there is no height defined of its parent element. And after that we will include css transform property like this:

This is for your home class:

.home {
  height: 1000px;
  background: #ccc;
  float: left;
  width: 100%;
}

And you have to change your html structure a bit like this:

<div class="container-fluid home">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>
 </div>

After that we will define some css property to our div which we want to make vertically and horizontally middle.

#text{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Now you can easily make your div vertical or horizontal align of the parent div.

Upvotes: 1

user7250444
user7250444

Reputation:

You can use this code:

View code snippet results in expanded mode

.home {
	height: 150px;
	background-color:red;
	position:relative;
}

 #text {
	 position:absolute;
	 top:50%;
	 text-align:center;
    text-align:center;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid home">

     <div class="row">
        <div class="col-md-12" id="text">
          <p>Hello World!</p>
        </div>

     </div>

Upvotes: 1

Related Questions