Guess 'cause I'm still getting over this fever, but it took a few stabs for making a sponsors display like:
(Looking at it now I realized it would have been a decent candidate for grid or even table, though it's nice that flexbox means you don't have to think about lining up with a row-like object)
I admit I'm falling into bad habit of "px" and non-semantic markup, but Oh Well...
(it is sad that it's 2019 and centering vertically isn't an instant no-brainer)
Anyway: markup like this, with "texty" for a sponsor that has no img:
<div class="sponsors">
<div class="texty"><div>Barry's Village Deli</div></div>
<div><img src="/img/sponsors2019/fastsigns.png"></div>
<div><img src="/img/sponsors2019/Justnextdoor.jpg"><div>Just Next Door</div></div>
//...
</div>
And then CSS like
.sponsors {
display: flex;
flex-wrap: wrap;
width: 845px;
margin: auto;
}
.sponsors > div {
margin:20px 2px;
width:270px;
height:270px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
.sponsors > div > div {
text-align: center;
width:100%;
}
.sponsors .texty {
color:white;
background-color:#2b809e;
font-size:1.5em;
}
.sponsors img {
max-width:250px;
max-height:250px;
}
No comments:
Post a Comment