CODEWITHSUNDEEP
htmlcss
Dfr
Dfr

Reputation: 4175

Make button vertically centered within td

Here is example:

  <table>
    <tr>
    <td style="background: lightgreen; vertical-align: middle">
      <button type="button">b1</button>
    </td>
    <td style="background: yellow; vertical-align: middle">
      <button type="button">b2</button>
        <textarea cols="40" rows="2"></textarea>
    </td>
    </tr>
  </table>

And here is JSFiddle link: http://jsfiddle.net/jhqjumgL/1/

I guess it's self-explaining, i need here all buttons vertically centered, but button paired with textarea for some reason decided to rest at bottom, any idea how to solve ?

Upvotes: 1

Views: 107

Answers (3)

vanarajcs
vanarajcs

Reputation: 978

Try this

<table>
    <tr>
        <td style="background: lightgreen;">
      <button type="button">b1</button>
    </td>
        <td style="background: yellow;">
      <button type="button">b2</button>
      <textarea cols="40" rows="2" style="vertical-align: middle"></textarea>
    </td>
    </tr>
  </table>

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

You need to vertically align the textarea as well:

button, textarea {
    vertical-align: middle;
}

Fiddle: http://jsfiddle.net/abhitalks/jhqjumgL/2/

Upvotes: 5

kupendra
kupendra

Reputation: 1003

The vertical-align property to sets the vertical alignment of an element.

So, you give it to element display vertically like following :

button{
   vertical-align : middle;
}

Upvotes: 0

Related Questions