verticaal centreren div tov andere div
onderstaande css werkt, maar ik wil er nog aan toevoegen dat mijn class kleinblokopschrift ook vertikaal wordt uitgelijnd tov klein blok. Niet alle opschriften zijn immers even groot.
probeerde al met valign center en meer an dat maar niks lijkt effect, of toch niet het gewenst.
Hierbij de css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.blokken-ul
{
list-style-type:none;
}
.blokken-li
{
display:inline-block;
margin:10px;
}
.blokbutton
{
color:white;
font-size:10pt;
font-weight:bold;
height:25pt;
background-color:#26888E;
border-radius:25px;
cursor:pointer;
width:120px;
margin-left:40px;
}
.blok
{
float:left;
width:200px;
height:250px;
border:2px solid #26888E;
border-radius:10px;
}
.bloktitel
{
font-family: verdana;
font-size:10pt bold;
color:#26888E;
text-align:center;
}
.blokicoon
{
font-size: 5em;
color:#26888E;
text-align:center;
}
.kleinblok
{
float:left;
width:150px;
height:75px;
border:2px solid #26888E;
border-radius:10px;
}
.kleinblok:hover
{
cursor:pointer;
}
.kleinblokopschrift
{
color:#26888E;
font-family:verdana;
font-size:12pt;
font-weight:bold;
width:100px;
float:right;
text-align:center;
}
{
list-style-type:none;
}
.blokken-li
{
display:inline-block;
margin:10px;
}
.blokbutton
{
color:white;
font-size:10pt;
font-weight:bold;
height:25pt;
background-color:#26888E;
border-radius:25px;
cursor:pointer;
width:120px;
margin-left:40px;
}
.blok
{
float:left;
width:200px;
height:250px;
border:2px solid #26888E;
border-radius:10px;
}
.bloktitel
{
font-family: verdana;
font-size:10pt bold;
color:#26888E;
text-align:center;
}
.blokicoon
{
font-size: 5em;
color:#26888E;
text-align:center;
}
.kleinblok
{
float:left;
width:150px;
height:75px;
border:2px solid #26888E;
border-radius:10px;
}
.kleinblok:hover
{
cursor:pointer;
}
.kleinblokopschrift
{
color:#26888E;
font-family:verdana;
font-size:12pt;
font-weight:bold;
width:100px;
float:right;
text-align:center;
}
Hierbij ook de php die dit aanroept.Maar denk niet dat dit veel terzake doet.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
echo "<li class=\"blokken-li\">
<div class=\"kleinblok\" onclick=\"getDownload('$spad','$sfilter');\">
<i class=\"far fa-file-pdf pdf-icoon\"></i>
<div class=\"kleinblokopschrift\">$aopschrift[0] <br> $aopschrift[1]</div>
</div>
</li>";
?>
echo "<li class=\"blokken-li\">
<div class=\"kleinblok\" onclick=\"getDownload('$spad','$sfilter');\">
<i class=\"far fa-file-pdf pdf-icoon\"></i>
<div class=\"kleinblokopschrift\">$aopschrift[0] <br> $aopschrift[1]</div>
</div>
</li>";
?>
Kan iemand helpen?
Dank bij voorbaat!
Zou dat eens moeten nazien in mijn analyse tool.
Of gaat het om een webapplicatie binnen een bedrijf met verouderde browsers?
Of zie ik dat fout?
Valt hier dan eventueel een mouw aan te passen?
Gewijzigd op 22/08/2018 14:07:44 door - Ariën -
Bedankt voor deze goed tip!