Divs naast elkaar centreren
ik heb een div met daarin 2 andere divs :
Ik wil dat de 2 divs in de 'inhoud' div worden gecentreerd. Hoe kan ik dat doen ?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id='inhoud' align='center' style= 'overflow: auto; width: 1010px; height: auto; background-color:Silver;'>
<div style='border:2px solid #000000; float: left; margin-top:10px; margin-bottom:10px; margin-left:10px; width: 300px; height: 300px;'></div>
<div style='border:2px solid #000000; float: left; margin-top:10px; margin-bottom:10px; margin-left:10px; width: 300px; height: 300px;'></div>
</div>
<div style='border:2px solid #000000; float: left; margin-top:10px; margin-bottom:10px; margin-left:10px; width: 300px; height: 300px;'></div>
<div style='border:2px solid #000000; float: left; margin-top:10px; margin-bottom:10px; margin-left:10px; width: 300px; height: 300px;'></div>
</div>
Ik wil dat de 2 divs in de 'inhoud' div worden gecentreerd. Hoe kan ik dat doen ?
Farid,
Inline css moet je zo weinig mogelijk gebruiken. het is totaal onoverzichtelijk en onflexibel.
align="center" gebruik je tegenwoordig ook niet meer. In plaats hiervan gebruik je css.
Een goed gebruik is als je float gebruikt om dit dan ook te clearen.
http://codepen.io/anon/pen/oepin?editors=110
css:
Inline css moet je zo weinig mogelijk gebruiken. het is totaal onoverzichtelijk en onflexibel.
align="center" gebruik je tegenwoordig ook niet meer. In plaats hiervan gebruik je css.
Een goed gebruik is als je float gebruikt om dit dan ook te clearen.
http://codepen.io/anon/pen/oepin?editors=110
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id='inhoud'>
<div class="item"></div>
<div class="item"></div>
<!--
als je float gebruikt moet je clearen
kijk maar eens wat er gebeurd als je dit weghaalt
-->
<div class="clear"></div>
</div>
<div class="item"></div>
<div class="item"></div>
<!--
als je float gebruikt moet je clearen
kijk maar eens wat er gebeurd als je dit weghaalt
-->
<div class="clear"></div>
</div>
css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#inhoud {
width: 100%;
background-color:Silver;
/* optioneel als je niet wilt dat de div's onder elkaar komen */
min-width:638px;
}
.item {
border:2px solid #000000;
background-color: red;
float: left;
/*
twee divs hebben een breedte van 300px = 600px
2 divs hebben li en re een border van 2px = 8px =
608 pixels in totaal.
*/
margin: 10px 0;
margin-left:calc((100% - 608px) / 3);
width: 300px;
height: 300px;
}
/*
als je float gebruikt moet je clearen
kijk maar eens wat er gebeurd als je dit weghaalt
*/
.clear {
clear:both;
}
width: 100%;
background-color:Silver;
/* optioneel als je niet wilt dat de div's onder elkaar komen */
min-width:638px;
}
.item {
border:2px solid #000000;
background-color: red;
float: left;
/*
twee divs hebben een breedte van 300px = 600px
2 divs hebben li en re een border van 2px = 8px =
608 pixels in totaal.
*/
margin: 10px 0;
margin-left:calc((100% - 608px) / 3);
width: 300px;
height: 300px;
}
/*
als je float gebruikt moet je clearen
kijk maar eens wat er gebeurd als je dit weghaalt
*/
.clear {
clear:both;
}
De ruimte tussen de divs moet gewoon 10px zijn. Ik snap niet wat je bedoelt met
En als ik :
weglaat op: http://codepen.io/anon/pen/oepin?editors=110
verandert de achtergrondkleur van grijs naar wit ?
En als ik :
weglaat op: http://codepen.io/anon/pen/oepin?editors=110
verandert de achtergrondkleur van grijs naar wit ?
Het gaat er om dat je het gebruikt zodat je later in staat bent om het zelf te maken. speel er eens mee!
Het is niet de achtergrondkleur die veranderd. Het is de #inhoud div (de container) die niet meer meegroeit qua hoogte.
door te clearen zal het parent element dus weer netjes de juiste hoogte aannemen.
calc() gebruik je om iets (in dit geval de margin-left) dynamisch te berekenen.
Omdat je geen dankjewel zegt zoek je het verder maar zelf uit ;-)
Het is niet de achtergrondkleur die veranderd. Het is de #inhoud div (de container) die niet meer meegroeit qua hoogte.
door te clearen zal het parent element dus weer netjes de juiste hoogte aannemen.
calc() gebruik je om iets (in dit geval de margin-left) dynamisch te berekenen.
Omdat je geen dankjewel zegt zoek je het verder maar zelf uit ;-)
ik ben wel dankbaar dat je helpt, alleen ik snap het nog niet.
Bijvoorbeeld wat is het nut van :
?
Bijvoorbeeld wat is het nut van :
?
Niet getest maar dit kan werken.
Je moet ook proberen om met % te werken omdat veel webiste responsive zijn.
Je moet ook proberen om met % te werken omdat veel webiste responsive zijn.
Code (php)
1
2
2
#inhoud { overflow: auto; max-width: 1010px; background: #E6E6E6; padding: 1% 0% 1% 1%; }
#inhoud .item { display: inline; width: 32.33%; height: 300px; margin: 0% 1% 0% 0%; border: 2px solid #000000; background: #FF0000;}
#inhoud .item { display: inline; width: 32.33%; height: 300px; margin: 0% 1% 0% 0%; border: 2px solid #000000; background: #FF0000;}
Gewijzigd op 08/11/2014 18:59:57 door Ferdi R
dank je voor je hulp maar ik heb het al opgelost.




