Divek középre igazítása CSS?
Annyi a lényeg, hogy fix szélességű divekben képeket jelenítek meg.
Ez alapján csinálom. Ez tök jó mert responsive így viszont, nem tudom a wrapper diven belül középre igazítani őket. A wrapper divnek egyébként %-osan van megadva a szélessége ha ez számít. Text-align: center, margin: 0 auto már meg volt és nem oldotta meg. Valakinek valami tipp?
válasza:Egy megoldási kiindulópont:
body {
text-align: center;
}
div.gallery {
/* float: left; helyett… */
display: inline-block;
}
Itt az üres karakterek fognak bezavarni, a képelemek között de azt is ki lehet küszöbölni. Pl.:
body { /* vagy csinálsz egy wraper divet köré */
font-size: 0;
}
div.galery {
font-size: 12pt;
}
Kicsit korszerűbb megoldás a flexbox használata. Lásd:
#1
Köszi de ez nem működik. A flexboxos megoldástól meg szétcsúszik az egész struktúra. Nem veszi figyelembe a wrapper szélességét meg semmit. Azért elég gáz hogy 2020-ban erre még nincs egy normális megoldás.
válasza: válasza:Ha jól értem, akkor ilyesmit szeretnél
<div id="wrapper">
<div >
aaa
</div>
<div >
bbb
</div>
<div >
ccc
</div>
</div>
CSS:
#wrapper
{
width : 60%;
display:flex;
background-color:gray;
flex-wrap: wrap;
justify-content: center ;
}
#wrapper>div
{
flex:0 0 40%;
display:box;
height:3em;
background-color:white;
margin:10px;
}
Viszont itt 3 div conténer van, ami miatt látható hogy furán néz ki, mert középre igazodik, erre lehet megoldás, hogy láthatatlan divekkel kiegészíted.
Érdekes lehet még a CSS grid is, lehet az a jobb neked.
válasza:Flex box-ot használj, működik, erre lett kitalálva, justify-content: center-el középen sorakoznak az elemek
De dupla wrapperrel is megy:
külső wrapper: (%os szélesség)
belső wrapper: (belső tartalom alapján szélesség, mondjuk inline-block display-el)
és akkor vagy a külső wrapper kap text-align centert
vagy a belső margin: 0 auto
#5
Köszi majd ránézek. Az egész oldalt újracsináltam flexbox alapokon már de akkor sem volt az igazi mert a galéria divjei középre rendeződtek ugyan de nem vették figyelembe a wrapper a content divet semmit hanem a kijelző egyik végétől a masikig tartottak és a képek aránya mérete is elment amit nem tudtam mire vélni.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!