html - 如何在css中使用flexbox对齐图像和文本？

.flex-row { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } .vilkaar-item-row { display: flex; flex-direction: row; } .vilkaarp { display: flex; justify-content: flex-start; } table { border-collapse: separate; border-spacing: 0.25em; } td, th { text-align: left; padding: 0 } td { max-width: none; }

<div class="flex-row"> <div class="flex-vilkaar-column"> <div class="vilkaar-item-row"><img src="svg/dollar.svg" alt=""> <div class="vilkaarp">Timehonorar: 295kr</div> </div> <div class="vilkaar-item-row"><img src="svg/pin.svg" alt=""> <div class="vilkaarp">Undervisningssted: Oslo</div> </div> <div class="vilkaar-item-row"><img src="svg/bil.svg" alt=""> <div class="vilkaarp">Reisetillegg: Ingen</div> </div> <div class="vilkaar-item-row"><img src="svg/kryss.svg" alt=""> <div class="vilkaarp">Timekanselering: Meldes minst 24 timer i forkant.</div> </div> <div class="vilkaar-item-row"><img src="svg/book.svg" alt=""> <div class="vilkaarp">Matematikkfag: T, R1, R2</div> </div> </div> <div class="flex-vilkaar-column"> <div class="flex-row"> <div class="vilkaar-item-row"><img src="svg/calendar.svg" alt=""></div> <div> <table> <tr> <th>Tilgjengelighet:</th> </tr> <tr> <td>Man</td> <td>16:00-22:00</td> </tr> <tr> <td>Tirs</td> <td>16:00-22:00</td> </tr> <tr> <td>Ons</td> <td>16:00-22:00</td> </tr> <tr> <td>Tors</td> <td>16:00-22:00</td> </tr> <tr> <td>Fre</td> <td>16:00-22:00</td> </tr> <tr> <td>Lør</td> <td>Hele dagen</td> </tr> <tr> <td>Søn</td> <td>Hele dagen</td> </tr> </table> </div> </div> </div> <div class="vilkaar-item-row"><img src="svg/shield.svg" alt=""> <div class="vilkaarp">Bakgrunnsskjekk: Fornyet 03/01/2017 </div> </div> </div>