CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 225

Multiple vertically-aligned elements in a table-cell

I am trying to create a table using bootstrap and within each cell I will have 3 data points:

  1. Upper left hand corner
  2. Center of the cell and vertically aligned in the middle
  3. Centered of the cell and vertically aligned to the bottom

I posted an example below, but I can't get it to work.

HTML

<!DOCTYPE html>
<html>
<head>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/main.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div class="container">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th class="col-xs-1">Column 1</th>
                    <th class="col-xs-1">Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-xs-1">
                        <div class="upperleft">
                            Datapoint1
                        </div>
                        <br />
                        <div class="middlecenter">
                            Datapoint2
                        </div>
                        <div class="lowercenter">
                            Datapoint3
                        </div>
                    </td>
                    <td class="col-xs-1"></td>
                </tr>
        </table>
    </div>
</body>
</html>

CSS

tr {
    width: 100%;
    display: inline-table;
    height: 120px;
}

.upperleft {
    display: table-cell;
    text-align: left;
    vertical-align: top;
}

.middlecenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.lowercenter {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
}

The original problem was that Data points 2 and 3 are not centered and that data point 3 is not vertically aligned to the bottom of the cell.

enter image description here

Upvotes: 3

Views: 3434

Answers (1)

vanburen
vanburen

Reputation: 21663

I think this is what you described but posting a mock-up/img would probably help a great deal.

.upperleft {
  display: block;
  text-align: left;
  vertical-align: top;
}
.middlecenter {
  display: block;
  text-align: center;
  vertical-align: middle;
}
.lowercenter {
  display: block;
  text-align: center;
  vertical-align: bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="col-xs-4">Column 1</th>
        <th class="col-xs-4">Column 2</th>
        <th class="col-xs-4">Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="upperleft">Datapoint1</div>
          <div class="middlecenter">Datapoint2</div>
          <div class="lowercenter">Datapoint3</div>
        </td>
        <td>
          <div class="upperleft">Datapoint1</div>
          <div class="middlecenter">Datapoint2</div>
          <div class="lowercenter">Datapoint3</div>
        </td>
        <td>
          <div class="upperleft">Datapoint1</div>
          <div class="middlecenter">Datapoint2</div>
          <div class="lowercenter">Datapoint3</div>
        </td>
      </tr>
  </table>
</div>

Upvotes: 5

Related Questions