Több div középre igazítása (CSS)
2021-06-26T14:46:02+02:00
2021-06-27T17:10:05+02:00
2022-08-19T02:22:07+02:00
*deleted_23419333
Sziasztok!

Div-eket szeretnék középre igazítani, de nem megy.

Az alábbi kóddal ezt kapom: imgur.com

De ezt szeretném: imgur.com

HTML

<!DOCTYPE html> <html> <body> <div id="videos"> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> <div class="video" style="background-color: #F00;"> <div class="thumb"><img src="" width="240" height="135" /></div> <div class="title">Title</div> </div> </div> </body> </html>

CSS

body { margin: 16px 0; padding: 0; background-color: pink; } #videos { padding: 8px; background-color: green; display: block; } .video { margin: 8px; display: inline-block; width: 240px; } .video .thumb { width: 240px; height: 135px; background-color: yellow; } .video .title {}
Mutasd a teljes hozzászólást!
Legegyszerűbben flex-el tudod megoldani:

#videos { padding: 8px; background-color: green; display: flex; flex-wrap: wrap; justify-content: center; }
Ezzel már konzisztens lesz ahol a vörös title részek is ugyanolyan magasak.
Ha mégis szeretnéd őket levágni akkor a .video classba rakd be ezt:

height: fit-content;
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd