Center FLOAT divs in container

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Freelance medior java ontwikkelaar Belastingdienst

Concern: Belastingdienst B/cao Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 85,00 Startdatum inzet: 24-10-2022 Einddatum: open De Douane Keten Aangifte zoekt een Medior Java Ontwikkelaar De Douane Keten Aangifte (DA) is verantwoordelijk voor het ontwikkelen, beheren en beschikbaar stellen van IV-voorzieningen voor de Douane applicaties, die het aangifteproces voor Douane ondersteunen. Daaronder vallen de systemen voor o.a. invoeren, doorvoeren en uitvoeren van goederen naar de EU (en Nederland). Keten DA is een van de drie ketens van IV Douane. Ontwikkeling van nieuwe applicaties en verbetering/uitbreiding van bestaande applicaties vindt binnen IV Douane plaats in tweewekelijkse sprints m.b.v. Agile-ontwikkelmethoden.

Bekijk vacature »

Freelance medior java ontwikkelaar Belastingdienst

Concern: Belastingdienst B/cao Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 85,00 Startdatum inzet: 24-10-2022 Einddatum: open De Douane Keten Aangifte zoekt een Medior Java Ontwikkelaar De Douane Keten Aangifte (DA) is verantwoordelijk voor het ontwikkelen, beheren en beschikbaar stellen van IV-voorzieningen voor de Douane applicaties, die het aangifteproces voor Douane ondersteunen. Daaronder vallen de systemen voor o.a. invoeren, doorvoeren en uitvoeren van goederen naar de EU (en Nederland). Keten DA is een van de drie ketens van IV Douane. Ontwikkeling van nieuwe applicaties en verbetering/uitbreiding van bestaande applicaties vindt binnen IV Douane plaats in tweewekelijkse sprints m.b.v. Agile-ontwikkelmethoden.

Bekijk vacature »

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

05/10/2022 00:28:47
 
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.