CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
Simon Ordo
Simon Ordo

Reputation: 1667

Bootstrap Vertical Center contents in row

I have a simple table-esque layout in Bootstrap 3 as such (it's a "property grid):

<div class="row">
  <div class="col-md-3">
    <div id="propGrid">
      <div class="row pgTable">
        <div class="col col-md-12">
          <div class="row pgGroupRow">
            <div class="col col-md-12 pgGroupCell">Editor</div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Font<span class="pgTooltip" title="The font editor to use">[?]</span></div>
            <div class="col col-md-7 pgCell"><input type="text" id="pg0font" value="Consolas" <="" input=""></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Font size</div>
            <div class="col col-md-7 pgCell"><span class="ui-spinner ui-corner-all ui-widget ui-widget-content"><input type="text" id="pg0fontSize" value="14" style="width:50px" aria-valuemin="0" aria-valuemax="20" aria-valuenow="14" autocomplete="off" class="ui-spinner-input" role="spinbutton"><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-up ui-corner-tr"></a><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-down ui-corner-br"></a></span></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Font color</div>
            <div class="col col-md-7 pgCell"><input type="text" id="pg0fontColor" value="#a3ac03" <="" input=""></div>
          </div>
          <div class="row pgGroupRow">
            <div class="col col-md-12 pgGroupCell">Plugins</div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">jQuery<span class="pgTooltip" title="Whether or not to include jQuery on the page">[?]</span></div>
            <div class="col col-md-7 pgCell"><input type="checkbox" id="pg0jQuery" value="jQuery" checked=""></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">modernizr<span class="pgTooltip" title="Whether or not to include modernizr on the page">[?]</span></div>
            <div class="col col-md-7 pgCell"><input type="checkbox" id="pg0modernizr" value="modernizr"></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Framework<span class="pgTooltip" title="Whether to include any additional framework">[?]</span></div>
            <div class="col col-md-7 pgCell"><select id="pg0framework"><option value="None">None</option><option value="angular" selected="">AngularJS</option><option value="backbone">Backbone.js</option></select></div>
          </div>
          <div class="row pgGroupRow">
            <div class="col col-md-12 pgGroupCell">Other</div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">iHaveNoMeta</div>
            <div class="col col-md-7 pgCell"><input type="text" id="pg0iHaveNoMeta" value="Never mind..." <="" input=""></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">I am read only</div>
            <div class="col col-md-7 pgCell"><label for="pg0iAmReadOnly" title="Label types use a label tag for read-only properties">I am a label which is not editable</label></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I've been trying with no success to vertically center the contents of the left column against the height of the right column.

Check out the Code pen at http://codepen.io/anon/pen/rrvNaV and take a look at the last row in particular.

I've tried adjusting the padding, but since the content of the right column has variable height, that doesn't seem like a good solution. The line-height adjustment I usually use seem to fail for similar reasons.

Any ideas on how to vertically center the contents of both columns, given it's row height (row height being determined by the content height in either column or a particular row)?

Upvotes: 2

Views: 8376

Answers (2)

stevec
stevec

Reputation: 52208

I added align-items-center to my row class.

Example:

<div class="container">
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

The example's from the Bootstrap docs here

Upvotes: 4

keithjgrant
keithjgrant

Reputation: 12739

Vertically centering float-based content is very problematic. There are a handful of hacks to do it (using transformations or negative bottom margins), but it is far easier to use display table or flexbox for the layout.

Change the row to flexbox like this:

.pgRow {
  background:yellow;
  display: flex;  /* make the row a flex container */
  align-items: center; /* vertically center each flex item in the container */
}

Be sure to remove the height from the .va! Generally, you should not set heights on containers in CSS; doing so will only introduce a load of other problems.

For more options, check out http://howtocenterincss.com/. To get a handle on flexbox, check out this article on CSS Tricks. To really get a handle on all these things and how they work together (shameless plug alert), checkout my book.

Upvotes: 9

Related Questions