CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
hfingler
hfingler

Reputation: 2014

Center content (text) of a bootstrap col vertically

I've seen over 10 stackoverflow questions and their answers, none have worked so far.

I have text inside a bootstrap col, but it just sits at the top of the col. I need it to be centered, preferably centered in relation to the image.

I was using the media object, but it did not look good for smaller devices.

This is what I have:

<div class="container">
  <div class="row">
     <div class="col-md-5">
        ...img stuff..
     </div>

     <div class="col-md-7 left-padding-30" style="height: 500px; border : 1px solid red;">
        <h2 class="featurette-heading">
           This First Heading
           <span class="text-muted">Will Catch Your Eye</span>
        </h2>
        <p class="lead">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. </p>
     </div>
  </div>

Output: enter image description here

jsfiddle: http://jsfiddle.net/9btr6zon/

I've set the height manually to 500px to try aligning the content. Is there any way I can remove it while still centering the content for bigger screens?

Extra question, the image is using img-circle and img-resposive, yet it's not resizing for smaller screens, can I fix this?

Edit: As a "placeholder" solution, I set the padding-top of the col to around 150px.

Upvotes: 0

Views: 138

Answers (3)

AndrewL64
AndrewL64

Reputation: 16311

With a little bit of display: flex;, you can vertically align your text with respect to it's div :) Here is a jsfiddle: http://jsfiddle.net/AndrewL32/9btr6zon/2/

.vert-align {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

P.s. I used a specific height in this jsfiddle but you can change and specify a percentage height or something according to your need later.

Upvotes: 0

hfingler
hfingler

Reputation: 2014

Alright, I lost my patience and ended up centering it by using padding. But since it looked very ugly on smaller devices I ended up using a variable padding:

@media (max-width:768px) {
  .var-padding {
    padding-top: 0px;
  }
}

@media (max-width:992px) {
 .var-padding {
    padding-top: 10px;
  }
}

@media (min-width:993px) {
  .var-padding {
    padding-top: 100px;
  }
}

Upvotes: 0

aahhaa
aahhaa

Reputation: 2275

I don't know about bootstrap but you can just inline it, and use vertical align to get the desired effect. 

.circle {
    border-radius: 50%;
	width: 100px;
	height: 100px;
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
}
.para {
    display:inline-block;
    vertical-align:middle;
}
h1,p {padding:0; margin:0;}
<div class="circle">
  <img src="http://placekitten.com/g/200/300">
</div>
<div class="para">
  <h1>HELP ME MAMA</h1>
  <p>The british are coming</p>
</div>

Upvotes: 0

Related Questions