CODEWITHSUNDEEP
htmlcss
SQL and Java Learner
SQL and Java Learner

Reputation: 731

How to vertical align middle two elements in same table cell

I have a table with 5 columns, all of which are vertically-aligned: middle. The first 4 columns consist of just text that are vertically aligned in the middle of the cell. These first four columns are nicely formatted; however, the last cell consists of two divs. The first is some text that is floated left and the second is a button that is floated right. Here is the html for the last cell:

 <td>
        <div style="float:left; width:50%">
              Text Not In Middle Of Cell
        </div>
        <div style="float:right; width:50%">
               <button type="button">Button Text</button>
        </div>
    </td>

Looking at the picture below, you can see that the text is not vertically aligned in the middle of the cell. Is there a way to center the text in the center of the cell with which it lives? I have tried adding vertical-align: middle to the divs but that did not work. It makes sense since the div is the height of the text so vertically aligning the text won't move it. Is there some other way to achieve this? Thanks for any help you can provide!

enter image description here

Upvotes: 1

Views: 1322

Answers (2)

Gerard
Gerard

Reputation: 15786

You can use a flexbox.

.container {
  display: flex;
  align-items: center;
}

.container button {
  margin-left: .5em;
}
<td>
  <div class="container">
    <div>
      Text Not In Middle Of Cell
    </div>
    <div>
      <button type="button">Button Text</button>
    </div>
  </div>
</td>

Upvotes: 2

Mohanad Inairat
Mohanad Inairat

Reputation: 81

Yes you can using :before , but you have to set height for your div

here is a sample code 

     .text_div{
       float:left;
       width:50%;
       height: 100px;
       background-color:#f00;
	}
	.text_div:before {
		content: ' ';
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	.text_div{
		vertical-align: middle;
		display: inline-block;
	}
<td>
    <div class="text_div">
        <a>Text Not In Middle Of Cell</a>
    </div>
    <div style="float:right; width:50%">
           <button type="button">Button Text</button>
    </div>
</td>

Upvotes: 0

Related Questions