Hallo,
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:

.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;
}

Hierbij ook de php die dit aanroept.Maar denk niet dat dit veel terzake doet.
<?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>";
?>
Kan iemand helpen?
Dank bij voorbaat!
Mogelijk kun je iets doen met line-height en/of padding.
Denk niet dat zo een flexbox een goede oplossing is. Vele gebruikers werken nog met oudere browsers denk ik.
Zou dat eens moeten nazien in mijn analyse tool.
De flexbox wordt in alle browsers wel ondersteund. Wie nog een oude browser gebruikt en deze niet updated loopt nu al tegen de feiten aan.

Of gaat het om een webapplicatie binnen een bedrijf met verouderde browsers?
Als ik het goed heb ondersteund enkel IE dit niet. Lijkt mee te vallen.
Of zie ik dat fout?
Valt hier dan eventueel een mouw aan te passen?
Internet Explorer 10 en lager. Maar dat is een heel kleine groep gebruikers die nu al op andere sites problemen zullen krijgen met de opmaak. Ik zou daar geen rekening meer mee houden. Dit stuk antiek komt uit 2011 ;-)
Oké, merci voor alle feedback. Ik zal het eens uittesten met flexbox. Zal wel pas morgen zijn. Zal dan hier feedback geven.
Ondertussen heel de dag uitgetest en dit doet perfect wat we verwachten.
Bedankt voor deze goed tip!

Reageren