Center FLOAT divs in container

Door Sam H op 08-03-2013 22:26

2.233 views

Ik heb de volgende HTML:


    <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:


/* 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.

Tim S

08-03-2013 22:34

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

09-03-2013 00:05

Darvoor dient de #blog container al.
Ik moet dan de float #blogposr divs centreren binnen die container.

Jan Koehoorn

09-03-2013 00:08

Divs die je eerst naar links float kun je niet centreren.

Sam H

09-03-2013 00:13

Dus hoe moet ik dit dan doen?

Frank Conijn

09-03-2013 01:02

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

09-03-2013 01:20

Ik dacht zelf aan zoiets:


<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>

Reageren

Inloggen om te reageren