Center FLOAT divs in container

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sam H

Sam H

08/03/2013 22:26:15
Quote Anchor link
Ik heb de volgende HTML:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
    <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>


en deze CSS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


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.
 
PHP hulp

PHP hulp

04/08/2020 21:26:50
 
Tim S

Tim S

08/03/2013 22:34:04
Quote Anchor link
Misschien een extra div aanmaken in de blog, hierin stop je dan de blog posts. Dit divje kan je dan centreren. Moet volgens mij wel werken.
 
Sam H

Sam H

09/03/2013 00:05:46
Quote Anchor link
Darvoor dient de #blog container al.
Ik moet dan de float #blogposr divs centreren binnen die container.
 
Jan Koehoorn

Jan Koehoorn

09/03/2013 00:08:04
Quote Anchor link
Divs die je eerst naar links float kun je niet centreren.
 
Sam H

Sam H

09/03/2013 00:13:59
Quote Anchor link
Dus hoe moet ik dit dan doen?
 
Frank Conijn

Frank Conijn

09/03/2013 01:02:52
Quote Anchor link
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).
 
Tim S

Tim S

09/03/2013 01:20:03
Quote Anchor link
Ik dacht zelf aan zoiets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.