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!