1

ive got some problem with my css styles: I have different groups ( <div>'s ) that have subgroups displayed in ONE colum or MULTIPLE ( max. 3) colums.

The problem i have is, that my vertical-align wont work within float elements with an 100% height.
within the subgroups: ST200 | Überblick... | EN DE should be displayed with
vertical-align: middle

Maybe someone could help me.
complete code posted on jfiddle

http://jsfiddle.net/ZAa33/

xQp
  • 292
  • 5
  • 21

3 Answers3

0

Vertical-Align Property works with only inline and inline-block elements. if you float any element, by default that element display property value is changed to block. In your case that is why vertical-alignment is not working on floated element. one solution for your problem is use inline.

[Inline-block demo](http://jsfiddle.net/Mostwanted_cJ/W8nf8)

Your JSFiddle is edited. change all of your span to div and apply display:inline-block and vertical-align:middle

Inline-block demo

cJ_
  • 446
  • 1
  • 4
  • 18
  • I tried it, but it wont work and i guess its because of my wrapper that has display: flex but i dont know, – xQp Jul 16 '14 at 15:09
  • another problem is, that your divs are vertical-aligned and i need to have them 100% and just the text inside at middle i tryed to use `

    ` for it but wont work either

     – xQp Jul 16 '14 at 15:13
  • i have fixed you code and added link at the bottom. check that. – cJ_ Jul 17 '14 at 12:02
  • dont see the result i like but thx so far ;) i did an easier way now and used a table within my `kurs` – xQp Jul 18 '14 at 08:46
0

Andres's comment here seems to address your problem: the line-height of the text is confining it to a smaller area than its container div.

To test, I changed the line-height property on .kursid to 35px, and the ST200 was successfully centered vertically, but only for those divs that had heights of 35px. For a more general solution, you could redesign your code to allow line-height and height to be set explicitly equal on all divs with text you want centered vertically, or you could see the other answers to that question for other options.

Community
  • 1
  • 1
insectean
  • 98
  • 2
  • 5
  • those divs will be filled by DB entries as it is ready, so i cant do a fixed height :/ thats why i posted `height 100%` at the topic – xQp Jul 18 '14 at 08:49
0

i found a solution to my Question that works pretty nice ;)

i just needed to set: 

.kurs {
    border-radius: 15px 15px 15px 15px;
    background-color: #c5c5c5;
    width: 100%;
    min-height: 35px;
    margin-bottom: 10px;
    display: flex;
    ! display: -webkit-flex; <- remove
    ! display: -moz-box;     <- remove
    align-items: center;     <- add
    justify-content: center; <- add
}

The updated fiddle ;)
http://jsfiddle.net/ZAa33/9/

xQp
  • 292
  • 5
  • 21