简体   繁体   中英

How to center fluid divs on same line?

I'm using a fluid grid layout in Dreamweaver and I've got three divs on the same line. It looks good except I'd like to center all three divs on the page. Right now they are all shifted to the left, as that's obviously what they are being told to do. I just don't know how to tell them to be centered.

Help would be much appreciated!

It looks exactly like this at the moment (not my image):

#item1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
}
#item2 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;
}
#item3 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 32.6007%;
    display: block;

#featuredholder {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

EDIT:

Please take a look at this picture to see exactly what I'm working with. 在此输入图像描述

I need those divs centered and still be fluid.

Hey now used to this css as like this

#wrapper{
margin:0 auto;
width:800px;
overflow:hidden;
}

#item1, #item2 , #item3 {
float:left;
width:30%;
 }
#item1{
margin-left:3%;
}

If I understand you right, you just need to add margin: 0 auto; to your wrapper.

#wrapper
{
    width: 80%;
    margin: 0 auto;
    padding: 10px;
}

#item1 {
    float: left;
    width: 32.6007%;
}
#item2 {
    float: left;
    width: 32.6007%;
}
#item3 {
    float: left;
    width: 32.6007%;
}

span.clear /*clearfix*/
{
    display: block;
    clear: both;
}

Also you don't neet to declare display: block; on a div as it is a block level element by default. Remove the clears on the divs also, or this will break the float (this is what the span.clear is for after your three divs.)

Demo: http://jsfiddle.net/Kyle_Sevenoaks/ZSYnW/


After your comment, you need to add in an extra div to wrap around the centered elements, set that div's margin to 0 auto and restructure the rest of your HTML so that each block of two sits within another wrapper div :)

http://jsfiddle.net/Kyle_Sevenoaks/ZSYnW/1/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM