CODEWITHSUNDEEP
htmlcssalignment
Geos
Geos

Reputation: 1467

Applying float:right style to button is messing its vertical alignment with adjacent text

I want to place a text and button in a table cell. The button needs to be aligned to the right. If I apply float:right style to the button the vertical alignment is going bad. Any help?

Here's jsfiddle with no float:right, vertical alignment is fine here: http://jsfiddle.net/5GRHL/2/

Here's jsfiddle with float:right applied: http://jsfiddle.net/5GRHL/3/

Upvotes: 1

Views: 1028

Answers (3)

Pevara
Pevara

Reputation: 14310

I believe the easiest solution is to set a fixed height to your button, and applying that same height as a line-height to the text. Something like this:

td
{
    height:50px;
    width:80px;
    vertical-align:middle;
    line-height: 22px;
}
td button 
{
    float:right;
    height: 22px;
}

I updated the fiddle: http://jsfiddle.net/5GRHL/26/

Upvotes: 2

Alden
Alden

Reputation: 837

You could just use the float:right and correct the alignment with positioning: http://jsfiddle.net/5GRHL/23/

Upvotes: 0

Binary Brain
Binary Brain

Reputation: 1211

I think the easiest solution (but maybe not the cleanest) is to realign the button.

Try something like:

button {
  margin-top: -4px;
  float: right
}

Upvotes: 1

Related Questions