CODEWITHSUNDEEP
htmlcssformsinput
armandfp
armandfp

Reputation: 1069

align text inside the "input select"

i have a simple form with css, and there is a select with this style:

.mysub_item select {
    height: 29px;
    width: 142px;
    background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
    border: 0;
    font-size: 12px;
    font-weight: bold;
    color: #4B4B4D;
}

and the text inside that select is always align to the top and left; is there a way that i can move that text?

surprise that IE7, IE8 and IE9 set that text center vertically.

Upvotes: 0

Views: 2804

Answers (4)

Sonal Khunt
Sonal Khunt

Reputation: 1894

Change height to height: 22px;

Upvotes: 0

Sonal Khunt
Sonal Khunt

Reputation: 1894

try this, may help you

.mysub_item select {
    height: 29px;
    width: 142px;
    background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
    border: 0;
    font-size: 12px;
    font-weight: bold;
    color: #4B4B4D;
    vertical-align:middle;
    line-height:1.8;
}

Upvotes: 0

coolguy
coolguy

Reputation: 7954

Add this property to the CSS

text-align:center

Upvotes: 0

Tim B James
Tim B James

Reputation: 20364

You will just need to add padding to the style and then adjust the height and width accordingly.

e.g.

padding: 5px;

Height now equals your original height - 10px ( 5px padding on the top and bottom ) Width now equals your original width - 10px ( 5px padding on the left and right )

Also as @peduarte suggested, you can add line-height which actually gives the same sort of results as padding.

Upvotes: 1

Related Questions