CODEWITHSUNDEEP
htmlcss
thclpr
thclpr

Reputation: 5938

Align label and textbox using css on horizontal center

How can i align the label text in the middle of the div ?

what i'm seeking is something like

       -----------
Name: |  textbox  |
       -----------

Demo code: http://jsfiddle.net/53ALd/2053/

Upvotes: 0

Views: 4837

Answers (2)

Venu immadi
Venu immadi

Reputation: 1605

I hope this will help you. Change the markup:

HTML:

<table>
  <tr>
    <td><label for='name'>Name:</label></td>
    <td><textarea type='text' id='name'></textarea></td>
  </tr>
</table>

CSS:

td {
  border-right: 1px solid #F1F1F1;
  border-top: 1px solid #F1F1F1;
  border-bottom: 1px solid #F1F1F1;
  border-left: 0px solid #F1F1F1;
  padding: 2px;
  margin: 0;
  vertical-align: middle;
}

Demo

Upvotes: 1

Lars Beck
Lars Beck

Reputation: 3584

The following should do the job:

label, textarea {
  vertical-align: middle;
}

Upvotes: 8

Related Questions