CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5854648
user5854648

Reputation: 1121

Vertical Align Content In Column

I need to vertically align content within a column using Bootstrap. I have done this with whole content blocks using the CSS code below by adding it to the row. I cannot replicate this to work on a column within a row however. I am trying to avoid flexbox for this particular project. I tried using table-cell at one point but it centered the whole row, I'm not sure if it conflicts with Bootstrap somehow.

Insight on how this works and how to solve it is appreciated.

HTML

<div class="row">
  <div class="col-sm-1">
  </div>
  <div class="col-sm-10">
    img class="img-responsive src="img/img1.jpg">
  </div>
  <div class="col-sm-1 vertical">
    <div>
      <p>Share</p>
      <img src=/img/icons/icon1.svg">
      <img src=/img/icons/icon2.svg">
      <img src=/img/icons/icon3.svg">
    </div>
  </div>
</div><!-- END ROW -->

CSS

.vertical{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Upvotes: 0

Views: 120

Answers (3)

Johannes
Johannes

Reputation: 67748

One way I can think of is using flex on .row, with align-items: center;:

https://codepen.io/anon/pen/PKovGB

Upvotes: 0

cup_of
cup_of

Reputation: 6687

In order to use the vertically centering top/transform trick, you need to make the element you want centered position absolute and its parent position relative.

.vertical{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.row {
  position: relative;
}

Upvotes: 1

Nikolay Ribarov
Nikolay Ribarov

Reputation: 16

I suppose you want to make the content of last column to be vertically centered to the content of the whole row. Correct me if I'm wrong with my assumption.

Basically when you're using float ( bootstrap uses it for columns ) each element will take the height of it's content, so in order to achieve some kind of vertical centered element, all of the elements ( or at least the last column div in your case and the column with largest height ) must have equal height or use position absolute.

What seems the easiest and cleanest way ( if you know the height of the largest column ), that won't require overriding some the bootstrap styles for these particular columns is to wrap the content of the column in another element ( as you did ) and put height: 100% and position: absolute to it. Something like this:

HTML 

    <div class="row">
      <div class="col-sm-1">
      </div>
      <div class="col-sm-10">
        <img class="img-responsive src="img/img1.jpg">
      </div>
      <div class="col-sm-1 col-to-be-aligned">
        <div class="vertical">
          <p>Share</p>
          <img src=/img/icons/icon1.svg">
          <img src=/img/icons/icon2.svg">
          <img src=/img/icons/icon3.svg">
        </div>
      </div>
    </div><!-- END ROW -->

CSS 

.col-to-be-aligned{
   height: 150px; // largest column height
}
.vertical{
   height: 100%;
   position: absolute;
   top: 50%;
   left: 0px; // if you want it left aligned
}

Most of the time you won't know the exact height of the element and if you don't want to use display flex and to override the bootstrap styles, what comes to my mind is to skip the last column as bootstrap one and put some custom styles to it.

HTML 

    <div class="row relative-row">
      <div class="col-sm-1">
      </div>
      <div class="col-sm-10">
        <img class="img-responsive src="img/img1.jpg">
      </div>
      <div class="col-to-be-aligned">
          <p>Share</p>
          <img src=/img/icons/icon1.svg">
          <img src=/img/icons/icon2.svg">
          <img src=/img/icons/icon3.svg">
      </div>
    </div><!-- END ROW -->

CSS 

.relative-row{
    position: relative; // in order to work the below styles
 }
.col-to-be-aligned{
    position: absolute;
    width: 8.33% // the same as col-sm-1
    right: 0px;
    top: 50%;
}

NOTE: Of course you can override the bootstrap styles with the styles from the last example, but this way you might have some style crossing, which will result in unwanted behavior.

Upvotes: 0

Related Questions