CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
smac89
smac89

Reputation: 43234

Twitter bootstrap center table column contents vertically as well as horizontally

Supposing I have the following table:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Summer is coming</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
    /* centered columns styles */
    .row-centered {
      text-align: center;
    }
    .col-centered {
      display: inline-block;
      float: none;
      /* reset the text-align */
      text-align: left;
      /* inline-block space fix */
      margin-right: -4px;
    }
  </style>
</head>

<body>
  <div class="table-responsive">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Time</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>0700 - 0730</td>
          <td>Stretches</td>
          <td>Stretches</td>
          <td>Stretches</td>
          <td>Stretches</td>
          <td>Stretches</td>
        </tr>
        <tr>
          <td>0730 - 0800</td>
          <td rowspan="2" class="col-centered row-centered">Eat breakfast (I want this centered)</td>
          <td rowspan="2">Eat breakfast</td>
          <td rowspan="2">Eat breakfast</td>
          <td rowspan="2">Eat breakfast</td>
          <td rowspan="2">Eat breakfast</td>
        </tr>
        <tr>
          <td>0800 - 0830</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

JSFiddle link

I am trying to center the content of the columns that span multiple rows to lie in the center of the column, but with the way I've done it, nothing seems to happen.

I am using this css to achieve the centering, but it does not center the content:

 /* centered columns styles */
 .row-centered {
   text-align: center;
 }

 .col-centered {
   display: inline-block;
   float: none;
   /* reset the text-align */
   text-align: left;
   /* inline-block space fix */
   margin-right: -4px;
 }

How can I accomplish this?

Upvotes: 2

Views: 1057

Answers (1)

Ema4rl
Ema4rl

Reputation: 588

Okay. You can achieve vertical alignment by using:

.table>tbody>tr>td {
    vertical-align: middle;
    display: table-cell; /* Courtesy: @Tracker1, for consistency across browsers */
}

Bootstrap has a CSS rule that counteracts this. It is like:

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,    
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

Here is a link to the line in Bootstrap's CSS master repo.


NOTE:

Ensure your CSS rule is more specific than Bootstrap's or overwrite theirs in your local copy of Bootstrap's CSS.

Upvotes: 3

Related Questions