I know this sounds basic, but it's not as simple as conveyed. Assume that I have no control over changing the HTML markup or the existing styles except the ones I delineate, and that I can only add styles.

Also keep in mind that I have already tried using line-height and using margins/paddings, but it messes up the rest of the space on the page which I need to keep to a minimum.

So I have a configuration like so:

<div class="form-item clearfix null">
  <label style="width: 135px;" for="serviceDiscPercent_quote" class="form-label">
    <span style="padding-right: 5px;">Service Discount :</span>
  <div style="padding-left: 135px;" class="form-element">
    <div class="text-wrapper" style="width: 80px;">
`    `<div class="text-wrapper-inner">
        <input type="text" name="serviceDiscPercent_quote" size="0" class="form-input-number auto-update-trigger " maxlength="255" id="serviceDiscPercent_quote" value="0.0">
`    `</div>

It looks like a text label and an input field on the same horizontal line. Right now the input is about 19px high, and the problem is the label tag is vertically aligned to the top of the field (not using vertical-align, that's just how it's setup). I need the text to be vertically aligned to the center of the input field.

Here is what I've tried:

-Set height on label tag to == input field, vertical align on that and parent tag, height of label changes but vertical alignment does not
-line-height on label, but that messes up spacing on the rest of the page (there are about 5 groups of 5 of these element combinations one on top of the other going down the page)
-margin and padding, but that messes up spacing as well
-display: table-cell and change vertical align, but changing display type messes up spacing as well

Remember, I cannot change classes or add them, or add ids. The current styles for the label that make positioning difference are:

clear: left;
float: left;
text-align: right;

The div (.form-item) has these styles: .form-item {

Any ideas/thoughts/questions? Help is really appreciated this is a bit of a nightmare project for me :)

3 answers


Vertical alignment is not the easiest thing to do since web pages are designed to extend vertically to make room for content. The only real answer is using margin and padding. The whole process can be tricky because of browser quirks.

One problem is that we can's see what you see or recreate it. When I try your markup, I get something entirely different than you are describing. We might need to see a sample of the page. There are very likely other styles effecting it's layout.

Answered about 7 years ago by kainosnous

If you could just post the whole code in jsbin, I can debug faster than you can spell pneumonoultramicroscopicsilicovolcanoconiosis.

Anyway from your input, i just recreated it in jsbin, and you can view it from here and you can edit it here

The only css I added are these:

label span { font: normal 12px/14px Arial, Helvetica, sans-serif }
.form-element { float: left }
.form-element input { font: normal 12px Arial, Helvetica, sans-serif; padding: 1px; margin: 0; border: 1px solid #666 }

the border is just for styling, also the i reduce the padding of the label in the DOM, but its just for illustration only, to show you that the input element is vertical aligned in center of the input field

Answered about 7 years ago by cssrockstah

That jsbin site is way cool, thanks for the reference. I'd love to post the code on here, but I'm working on an internal proprietary project right now so I don't have that ability =\

I took some screenshots of what the markup prints out as, as well as some screenshots of the CSS styles that I could. If you could check it out that would be awesome, just a bit of a nightmare here :)

Print Out:

CSS1 (form-item):

CSS2 (label):

CSS3 (.form-element (the input field)):

Thanks in advance.

Answered about 7 years ago by Bryan Taylor