CODEWITHSUNDEEP
htmlcssalignment
coffee-and-code
coffee-and-code

Reputation: 215

Vertcally align text and text of float-right element

I have a very simple table and I want to vertically align the text of two elements, one of which is plain text and the other is a button (I've put them in span tags, because I've been trying different things), so now the code snippet looks like that:

<tr>
   <td>element</td>
   <td>
      <span> test </span>
      <span>
           <button class="btn btn-danger pull-right">Delete</button>
      </span>
   </td>
</tr>

and 

th, tr, td{
  vertical-align: middle !important;
}

Unfortunately no matter what I try, as long as I use the pull-right class it looks like this:

enter image description here

The "test" element just won't align in the middle or align with the "Delete" text of the button. Any tips would be appreciated!

Upvotes: 0

Views: 52

Answers (2)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

try this: 

span.test{
    line-height: 35px;
}
th, td {
  border: 1px solid black;
}

<tr>
   <td>element</td>
   <td>
      <span class="float-left test"> test </span>
      <span class="float-right">
           <button class="btn btn-danger pull-right">Delete</button>
      </span>
   </td>
</tr>

Upvotes: 0

FRM
FRM

Reputation: 1

remove pull-right class and try this instead :

<tr>
   <td>element</td>
   <td class="d-flex align-items-center justify-content-between">
      <span> test </span>
      <span>
           <button class="btn btn-danger">Delete</button>
      </span>
   </td>
</tr>

Upvotes: 0

Related Questions