13

After coming back to web-development after a four year hiatus, I am having a tough time vertically aligning the contents of a bootstrap 3 column with the next column. I have tried searching this site as well as generic searches in general and have just not come up with the right solution ... or my search terms are poor.

In the HTML/CSS below, I would like to vertically center the "Page Title" text in the left column. I would like to keep the HTML and CSS as concise as possible while using the Bootstrap 3 CSS, so I just think I am completely missing something simple.

HTML 

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
    <div class="page-header-description"><small>Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>

CSS 

    .page-header-box {
        background-color:#3D3D3D;
        border-bottom:5px solid #b3b5b8;
        margin-bottom:10px;
    }
    .page-header-title { color:#f79239;text-align:right;vertical-align:middle;margin:10px 0; }
    .page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
    .page-header-description { color:#febe10; }
    .page-header-alt { margin-top:5px;color:#0093b2; }

Here is a jsFiddle ... http://jsfiddle.net/E6LcY/8/

This is one of the few times I have ever posted, so pointing me in the right direction would be great.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
ACG
  • 750
  • 2
  • 6
  • 16
  • possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) – Jakub Matczak Sep 08 '13 at 09:31
  • I have seen the post that was linked inside that SO ... "understanding vertical align..." If possible I specifically want to stay within the Bootstrap 3 framework. If that is not possible, since I may be misunderstand the use of vertical-align, then I will just leave the css with the title aligned at the top of the left column. – ACG Sep 08 '13 at 09:45
  • I typically disregard posts that are 5ish years old, as I had assumed that the old status quo may have changed. It seems that I am wrong and should possibly eat crow (which is quite tasty with enough hot sauce). I was hoping that I was just missing something stupid and I really just need to RTFM! Since I don't really want to change from bootstrap, I may just stick with this final rendition and have the text align to the top and not attempt to align it vertically. http://jsfiddle.net/E6LcY/8/ Sorry for wasting your time. Maybe I should just delete the question? – ACG Sep 08 '13 at 09:54
  • Using some JS, I came up with this ... http://jsfiddle.net/E6LcY/13/ – ACG Sep 08 '13 at 11:02
  • Doesn't work in Firefox. – Jakub Matczak Sep 08 '13 at 11:10
  • @dragoste ... it works fine in FF. You just have to tell jsFiddle to do "no wrap - in " instead of "onLoad". It was my first time using jsFiddle, so I did not know about that setting. – ACG Sep 09 '13 at 10:06
  • possible duplicate of [vertical-align with bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) – Hashem Qolami Sep 14 '14 at 22:22
  • @HashemQolami, thanks for the suggestion... but how can I be a duplicate of a post that was made 3 months later? Am I supposed to be able to time travel? I realize that other methods were presented, but I have not changed my implementation in a year ... FlexBox was not really an option a year ago and I don't want to redo all the CSS that has been working. On a side note ... I scrapped the centering of the div as visually it was not appealing in all situations. – ACG Sep 21 '14 at 09:05
  • @AlonChanochGolub Ah.. sorry mate, my bad. I didn't notice the months. – Hashem Qolami Sep 21 '14 at 11:31

4 Answers4

9

I considered deleting this question, but thought the answer could be useful to someone else (like me) that is looking for a possible solution.

I wanted to stay within the Bootstrap 3 framework ... and ended up adding some JavaScript to make the "titled" centered. I figured that Bootstrap 3 basically requires jQuery for some functionality so it was OK.

Now, I am sure there may be a better way, but I did not like the other solutions. Thanks to all that attempted to put me on the right paths.

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
</div>

CSS

.page-header-box {
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }

JS (using jQuery)

var sep_height = '';
$(window).on("load resize", function(e) {
var seperatorHeight = $('#header-seperator').height();
if (seperatorHeight != sep_height) {
    sep_height = seperatorHeight;
    var titleHeight = $('#header-title').height();
    var difference = ((seperatorHeight - titleHeight) / 2) + 5;
    $('#header-title').css('margin-top', difference + 'px');
}
});

Note: the "sep_height" is just so that I don't make unnecessary calculations and only modify the title height when I need to. I am also adding an additional 5px to the top- margin to compensate for the margins on the description text.

Here is the latest fiddle (with a fix for the onLoad event): http://jsfiddle.net/E6LcY/15/

Thanks again to all those who helped.

ACG
  • 750
  • 2
  • 6
  • 16
  • 12
    Using JS to do formatting work is madness. There must be a better way to achieve this within bootstrap 3 framework. – Houman Dec 18 '13 at 11:45
  • 1
    I would like a better solution as well ... but didn't get many suggestions when I first posted the query. I even stated "Now, I am sure there may be a better way, but I did not like the other solutions. Thanks to all that attempted to put me on the right paths." ... If you have a better solution, then I am all for it :) – ACG Dec 19 '13 at 14:48
  • 1
    @Hooman Actually there *is* [a better way](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025) which is not only for Twitter Bootstrap 3. If you do not concern about old web browsers though. – Hashem Qolami Aug 27 '14 at 00:15
  • @HashemQolami that "better way" is useless because it breaks the responsive functionality - see my comment there – Pere Feb 17 '15 at 12:48
0

Add the rule: line-height: 45px; to the col-md-2 class

UPDATED FIDDLE

Danield
  • 121,619
  • 37
  • 226
  • 255
0

This is how i do, you can try this:

.Parentdiv{
position:relative;
width:100%;
height:100%;
}

.Parentdiv .childdiv{
position: absolute;
top:0;
bottom:0;
margin:auto;
}
Mirage
  • 1,477
  • 16
  • 28
0

I'm starting to get tired of bootstrap in certain aspects somehow. Sometimes the amount of hacking required to accomplish certain functionalities is not worth the supposed benefits you get from using it.

In this case, I ended archiving the functionality I needed by abandoning bootstrap and using a combination of flexboxes with those properties applied to the parent:

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

those to the children:

.parent > div {
  display: inline-block;
  vertical-align: middle;
}

and this media query:

@media all and (max-width: 500px) {
  .parent {
    /* for small screens, we use column direction rather than row */
    flex-direction: column !important;
  }
}

The html involved is like this:

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

I used this, for instance, for a responsive footer. Playing with a combination of some fixed width and margin (same for each), they get nicely aligned on top of the others in different quantities per row depending on the width of the screen, until it is narrow enough to just show them in one row.

In my opinion, much clearer, easier, cleaner and less code, with better responsiveness, better layout support, avoids using javascript and without all the overhead and hassle of bootstrap.

Pere
  • 1,068
  • 12
  • 20