css - vertical-align middle in th - Stack Overflow

admin管理员组

文章数量:1395367

How can I get the "X" in the image below to be vertically align to the middle of the th cell using only css?

I need to do this without adding additional elements (ex putting the th contents into a div) as these elements are generated by a 3rd party library where I can only control the css.

/

.headerCell {
  vertical-align: middle;
  height: 90px;
  width: 200px;
  border: 1px solid red;
}

.headerText {
  border: 1px solid blue;
  width: 150px;
  float: left;
}

.headerX {
  border: 1px solid blue;
  float: right;
}

<table>
  <tr>
    <th class="headerCell">
      <div class="headerText">Text that takes up multiple lines</div>
      <div class="headerX">X</div>
    </th>
  </tr>
</table>

How can I get the "X" in the image below to be vertically align to the middle of the th cell using only css?

I need to do this without adding additional elements (ex putting the th contents into a div) as these elements are generated by a 3rd party library where I can only control the css.

https://jsfiddle/qt0hpnak/

.headerCell {
  vertical-align: middle;
  height: 90px;
  width: 200px;
  border: 1px solid red;
}

.headerText {
  border: 1px solid blue;
  width: 150px;
  float: left;
}

.headerX {
  border: 1px solid blue;
  float: right;
}

<table>
  <tr>
    <th class="headerCell">
      <div class="headerText">Text that takes up multiple lines</div>
      <div class="headerX">X</div>
    </th>
  </tr>
</table>

• css

Share Improve this question Follow edited Mar 13 at 13:54 Ori Drori 194k3232 gold badges238238 silver badges229229 bronze badges asked Mar 13 at 13:51 innominate227innominate227 11.7k11 gold badge2020 silver badges2222 bronze badges 5

• 1 there are several ways to vertically center content inside a div... but when talking of tables it's better not to scramble with the table layout by doing display: flex for example. So another harmless approach could be setting position: relative on each th and then absolute positioning the element you wish to be vertically in the middle close to the right border.. like this: position: absolute; right: 10px; top: 50%; transform: translateY(-50%); – Diego D Commented Mar 13 at 14:03
• Be sure a table is appropriate for your purposes. They should not be uses simply to facilitate layout. They have a specific semantic meaning in a document. Also, floats really shouldn't be used like this. They're for wrapping text around an element. – isherwood Commented Mar 13 at 14:11
• the suggestion I gave before since it's using absolute position, it may fail overlapping content being rendered as block. It would require a strategy that will deal with the cell width leaving enough room for the close button – Diego D Commented Mar 13 at 14:22
• You could set a margin-top: 5%; on your headerX. – SoftwareDveloper Commented Mar 13 at 15:25
• stackoverflow/questions/20155261/… – Paulie_D Commented Mar 13 at 15:27

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

Have .headerX move down vertically at half of its height. Add the following to .headerX: translate: 0 50%

.headerCell {
  vertical-align: middle;
  height: 90px;
  width: 200px;
  border: 1px solid red;
}

.headerText {
  border: 1px solid blue;
  width: 150px;
  float: left;
}

.headerX {
  border: 1px solid blue;
  float: right;
  translate: 0 50%; /* Move it down by 50% of its own height */
}

<table>
  <tr>
    <th class="headerCell">
      <div class="headerText">Text that takes up multiple lines</div>
      <div class="headerX">X</div>
    </th>
  </tr>
</table>

Inspired by zer00ne answer I ended up using a combination of absolute positioning and translation to get the X centered

.headerCell {
    vertical-align:middle;
    height:90px;
    width: 200px;
    border:1px solid red;
    position: relative;
}

.headerText {
    border:1px solid blue;   
    width: 150px;   
    float: left; 
}

.headerX {
    border:1px solid blue;    
    top: 50%;
    left: 100%;    
    translate: -100% -50%;
    position: absolute;
}

<table>
  <tr>
    <th class="headerCell">
      <div class="headerText">Text that takes up multiple lines</div>
      <div class="headerX">X</div>
    </th>
  </tr>
</table>

https://jsfiddle/o2cyjk4L/

You can format the cell by making it a grid and within that the children can align items using flex.

.headerCell {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 90px;
  width: 200px;
  border: 1px solid red;
}

.headerCell>* {
  display: flex;
  align-items: center;
}

.headerText {
  border: 1px solid blue;
  width: 150px;
}

.headerX {
  border: 1px solid blue;
  justify-content: center;
}

<table>
  <tr>
    <th class="headerCell">
      <div class="headerText">Text that takes up multiple lines</div>
      <div class="headerX">X</div>
    </th>
  </tr>
</table>

本文标签： cssverticalalign middle in thStack Overflow