CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Phoenix
Phoenix

Reputation: 322

How to vertically center text in bootstrap 3?

Edited for better understanding:

html,body {
    height:100%;
    padding:0;
}
#home {
	color: black;
	background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-image: url(../images/bg-1.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    min-height:100%;
}

#home .vcenter {
	vertical-align: middle;
    display: inline-block;
    float: none;
    border: 1px solid white;
}
<section id="home">
  <div class="container-fluid">
    <div class="row">
	  <div>
		<h1 class="text-center vcenter">Heading</h1>
		<h3 class="text-center vcenter">Sub Heading</h3>
	  </div>
	</div>
  </div>
</section>

I have tried the above but it's not working. I have used min-height in section id because i want the bg image to be full screen as per screen size but the text is not vertically and horizontally center.

I want the text to appear center of page according to screen size.

enter image description here

I want the headings to go where its written 1920x1080.

Thanks!

Upvotes: 1

Views: 19547

Answers (4)

claudios
claudios

Reputation: 6656

Just replace the vcenter class to pagination-centered. That should work. And adjust padding on top. No need to add custom dirty css to get things done.

.section-content {
  padding-top: 10%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="header">
    <div class="container-fluid">
        <div class="row">
            <div class="section-content">
                <h1 class="text-center pagination-centered">Heading</h1>
                 <h3 class="text-center pagination-centered">Sub heading</h3>
             </div>
          </div>
     </div>
 </section>

Or if you wanted it to be vertically centered on all screen sizes:

.section-center__full {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="header">
    <div class="container-fluid">
        <div class="row">
            <div class="section-center__full">
                <h1 class="text-center">Heading</h1>
                 <h3 class="text-center">Sub heading</h3>
             </div>
          </div>
     </div>
 </section>

Upvotes: 2

Mohammad Usman
Mohammad Usman

Reputation: 39322

There can be many possible variants for this.

Method # 01:

Use css3 flexbox. You can use following HTML structure for this. In my opinion .container-fluid, .row and div inside .row is excess in this case.

<section id="header">
  <h1 class="vcenter">Heading</h1>
  <h3 class="vcenter">Sub heading</h3>
</section>

And following css:

#header {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}


@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

#header {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
}
#header .vcenter {
  margin: 0;
}
<section id="header">
  <h1 class="vcenter">Heading</h1>
  <h3 class="vcenter">Sub heading</h3>
</section>

Method # 02:

Use table properties. For this however you will need one more wrap. Use following HTML structure:

<section id="header" class="text-center">
  <div>
    <h1 class="text-center vcenter">Heading</h1>
    <h3 class="text-center vcenter">Sub heading</h3>
  </div>
</section>

And following css:

#header {
  display: table;
  height: 100vh;
  width: 100%;
}
#header > div {
  vertical-align: middle;
  display: table-cell;
}


@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

#header {
  display: table;
  height: 100vh;
  width: 100%;
}
#header > div {
  vertical-align: middle;
  display: table-cell;
}
#header .vcenter {
  vertical-align: middle;
  display: inline-block;
  margin: 0;
}
<section id="header" class="text-center">
  <div>
    <h1 class="vcenter">Heading</h1>
    <h3 class="vcenter">Sub heading</h3>
  </div>
</section>

Upvotes: 2

Santosh Khalse
Santosh Khalse

Reputation: 12700

Please try this code.

html,body {
    height:100%;
    padding:0;
}
#home {
	color: black;
	background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-image: url(../images/bg-1.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    min-height:100%;
}

#home .vcenter {
	vertical-align: middle;
    display: inline-block;
    float: none;
    border: 1px solid white;
}

section{
  height:100%;
  display:flex;
  align-items:center;
  align-content:center;

}
<section id="home">
  <div class="container-fluid">
    <div class="row">
	  <div>
		<h1 class="text-center vcenter">Heading</h1>
		<h3 class="text-center vcenter">Sub Heading</h3>
	  </div>
	</div>
  </div>
</section>

you can view codepen link http://codepen.io/santoshkhalse/pen/oYoKMP

Upvotes: -2

Manish Patel
Manish Patel

Reputation: 3674

You try using position:absolute to you center div and give 100vh height to your main div.

body {
  margin: 0;
}
#header {
  width: 100%;
  background: #333;
  height: 100vh;
  position: relative;
}
#header .vcenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 10;
}
#header .vcenter h1 {
  margin-top: 0;
}
<section id="header">
  <div class="container-fluid">
    <div class="row">
      <div class="vcenter">
        <h1 class="text-center">Heading</h1>
        <h3 class="text-center">Sub heading</h3>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

Related Questions