Producing a dashboard which has a column filled with rectangles to access different applications.
Each application is represented as a grey rectangle which contains the application name and an image.
Currently it looks like this. The vertical alignment of everything being in the centre is exactly what I want. But I want the image to appear on the right of the rectangle (see final screenshot on the post).
The markup for an individual app box looks like this
<div class="apps-container"><a href="#"><div class="apps-container__app-box"><div style="display: flex; align-items: center;"><h4>App name</h4><img src="app-logo.svg"></div></div></a><!-- Other apps in equivalent .apps-container__app-box --></div>Anywhere on the grey rectangle should be clickable to access the app which is why it's surrounded with an <a href>. The CSS for that a element contains
display: flex;align-items: center;If that CSS is removed then it renders vertically at the top of the box rather than the centre like so.
Inside .apps-container__app-box the app name and image are inside a <div>. I added some inline CSS where I've tried various things. Currently it's set to display: flex; align-items: center; which is the same rules as the parent <a href>. If I remove that inline CSS it goes back to how it's shown on the second screenshot where the vertical alignment is no longer in the centre.
I took the approach of using a "flexbox inside a flexbox" from How to vertically align text inside a flexbox?
I don't understand how to do this, or why changing either of these rules is affecting it in the same way. I thought that rules could be used independently, i.e. using the parent <a href> to do the vertical centre and then some other rules on .apps-container__app-box to control the layout of the text and image.
The desired output should look like this:
Can anyone point me in the right direction?