Home/ Questions/Q 6114951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:02:07+00:00

So I’ve been struggling on a rather weird problem. I’ve tried everything from display:inline-block

  • 0

So I’ve been struggling on a rather weird problem. I’ve tried everything from display:inline-block on spans etc., with vertical-aligns set to center and wrapping within div’s with display:table and the child div as table-cell, but NOTHING seems to have any effect on vertical alignment!

I’ve added the code on jsfiddle: http://jsfiddle.net/rtKra/6/ and if you hover over the li’s you’ll know what I mean if the li content is on a single line it should be centered with the color box on it’s left. If it spans more than two lines, it doesn’t seem to matter since the top of the li is aligned with the top of the context box and the bottom exceeds to color box so it looks fine

The troublesome part is the ‘space’ below the ‘labelDescriptor’ div – should be in line with the color box on the left. If it does come in line, the content still remains aligned to the top of the div!!

The issue is the hover’s background – it should be the same height as the color box on its left. Setting min-height works without a table/table-cell display, but it still has a lot of space from the bottom of the content to the bottom of the div and looks a bit off.

Simple padding doesn’t cut it. Although it works for the small li’s (with less content) it looks off for the ones that split over to the next line!

I’ve been working at it for quite a while now and have almost given up!!! I just can’t seem to get anything to work!

I made the div’s content wrap in < p > tags but it adds way too much space (above and below) and makes the whole thing a total mess. I don’t want to blow up the font size just for the sake of it either.

Any ideas? Can it be fixed using simple css or would javascript/jquery have to be used?

The code of the html+css would get a bit too long to post here. But if the need be I could do it…

**UPDATE: ** Here is the image description of what it should look like and what I have been able to do (the fiddle url for the one on the right is http://jsfiddle.net/rtKra/9/)

enter image description here

I wish to replicate the ‘look and feel’ of gmail’s label menu as on the left. See how well aligned the text is with the ‘color box’ (note I don’t need a full hover over the color box too). The middle image shows how the alignments are off. Would the text get centered on a div with min-height:16px it would align well. But it is NOT happening and looks visually appalling. The image on the right is what you get after changing font size to 16px and making the color box’s (red) width and height = 1em and moving it down by 3px (top:3px) – The question still is all this could have been avoided by just having the content vertically center in the div in the first place. Since irrespective of the “number of lines” in the bullet it would ‘align well’ without having to hack it around like I’ve done. Hope that clarifies what I want to do 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you want something like this. Edit the font size to see the working.

    The key properties are:

    .category {
    position: relative;
}
.category .labelColorPicker {
    width: 16px; 
    height: 16px; 
    border: 1px solid black;
    vertical-align: top;
    padding: 0;
    margin: 0;
}
.category .labelDescriptor {
    border: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
    min-height: 16px;
}
.category .hoverMenu {
    position: absolute;
    left: 100%;
    top: 0;
}

    Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. I added two IE7 patch lines to the CSS, because inline-block does not work fully in IE7.

    • 0