Databases
StackOverflow2013
Postsdbo
POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
    primarykey
    data
    text
    <p>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!</p> <p>I've added the code on jsfiddle: <a href="http://jsfiddle.net/rtKra/6/" rel="nofollow noreferrer">http://jsfiddle.net/rtKra/6/</a> 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</p> <p>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!!</p> <p>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.</p> <p>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!</p> <p>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!</p> <p>I made the div's content wrap in &lt; 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.</p> <p>Any ideas? Can it be fixed using simple css or would javascript/jquery have to be used?</p> <p>The code of the html+css would get a bit too long to post here. But if the need be I could do it...</p> <p>**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 <a href="http://jsfiddle.net/rtKra/9/" rel="nofollow noreferrer">http://jsfiddle.net/rtKra/9/</a>)</p> <p><img src="https://i.stack.imgur.com/0qfnn.png" alt="enter image description here"></p> <p>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 :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPhD
    1. USPhD
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO`.category .labelDescriptor { padding:3px }` ?
      singulars
      1. POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
      1. USdaryl
    2. CO+1 For your effort in explaining and providing a fiddle. But it still is not clear to me what you precisely want. Could you provide an image of the desired result as well?
      singulars
      1. POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
      1. USNGLN
    3. CO@NGLN: Check out the updated fiddle: http://jsfiddle.net/rtKra/9/ Look at the last two bullets, "Font adjusted..." - the only solution I am able to go by is adjusting the size of the color box to be 1em and change the font size to about 13-14px to get the optimum height. I'm just trying to replicate Gmail's labels, and wanted the hover background to "align-well" with the colorbox. I've added a green border for reference. You'll notice how the last two bullets "look perfect" but the alignment is a bit off for the others
      singulars
      1. POvertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height?
      1. USPhD
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload