Center FLOAT divs in container
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
30
31
32
33
34
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
30
31
32
33
34
<div id="blog">
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
</div>
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
<div class="blogpost">
<img src="images/blog_image.jpg" width="100%" height="130px" alt="Blogpost"/>
<h3>Blogpost 1</h3>
<p>
Dit is een eerste blogpost. Hier zullen er nog meerdere volgen maar dit is slechts een voorbeeld.
</p>
<a href="#">Lees verder...</a>
</div>
</div>
en deze CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
/* Blogpost */
div#blog {
border: 2px solid #FFF;
overflow: auto;
}
div.blogpost {
float: left;
width: 230px;
margin: 20px;
border: 0px solid #FFF;
}
div#blog {
border: 2px solid #FFF;
overflow: auto;
}
div.blogpost {
float: left;
width: 230px;
margin: 20px;
border: 0px solid #FFF;
}
Deze staan nu mooi naast elkaar in de container #blog, echter wil ik deze centeren in deze container zodat wanneer het scherm kleiner wordt, en er slechts 3 blogposts op een rij passen, dat deze zich toch mooi centreren.
Ik moet dan de float #blogposr divs centreren binnen die container.
Sam H op 09/03/2013 00:13:59:
Dus hoe moet ik dit dan doen?
Er zijn verschillende manieren. Welke voor jouw geval de beste is hangt af van de context, van de opbouw van de rest van de pagina. Ik heb er echter een verhaal over geschreven: How to Center in CSS (tutorial).
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
30
31
32
33
34
35
36
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
30
31
32
33
34
35
36
<style type="text/css">
#blog{
height: 800px;
width: 800px;
background:#CCCCCC;
margin: 0 auto;
}
#center{
margin: 0 auto;
background:#999999;
height: auto;
width: 750px;
overflow: hidden;
}
.item{
background:#FF0000;
float: left;
width: 230px;
height: 700px;
margin: 10px;
}
</style>
<div id="blog">
<div id="center">
<div class="item"> </div> <div class="item"> </div> <div class="item"> </div>
</div>
</div>
#blog{
height: 800px;
width: 800px;
background:#CCCCCC;
margin: 0 auto;
}
#center{
margin: 0 auto;
background:#999999;
height: auto;
width: 750px;
overflow: hidden;
}
.item{
background:#FF0000;
float: left;
width: 230px;
height: 700px;
margin: 10px;
}
</style>
<div id="blog">
<div id="center">
<div class="item"> </div> <div class="item"> </div> <div class="item"> </div>
</div>
</div>