Menu icon Foundation
How to Center a Div

My homepage has the div with full screen image slider from top to bottom, left to right. The div is currently on left side. How to center the div?

how to center div

My homepage has the div with full screen image slider from top to bottom, left to right. The div is currently on left side. How to center the div?

sudheer over 5 years ago

.divClassname{
margin:0px auto;
}

Sebastian Pierre over 5 years ago

Add the following css:

.name {
margin:0 auto;
}

some people use

.name {
margin-left: auto;
margin-right: auto;
}

however they will get you the same results.

http://css-tricks.com/snippets/css/centering-a-website/

Bridget over 5 years ago

Thank you for the codes. I tried each and am not doing something right. Below is the codes for the homepage slider to see where I put the code in, could be in wrong place or would I need something else? For reference, the homepage link is:

http://bridgetmoore.com/staging_brownstoneV1/index.html

<!doctype html>



<!-- you can use these links, but better you have a link to the versions you need -->
<!-- usage of folder "current" is not recommended -->
<!-- see http://beaverslider.com/how-to-setup/docs/general for more info -->

$(function(){
var slider = new BeaverSlider({
type: "slider",
structure: {
container: {
id: "my-slider-id",
width: 1440,
height: 900
},
controls: {
containerClass: "control-container",
elementClass: "control-element",
elementActiveClass: "control-element-active",
previewMode: false
}
},
content: {
images: ["img/1_min.jpg","img/2_min.jpg","img/3_min.jpg","img/4_min.jpg"]
},
animation: {
effects: effectSets["slider: fade"] =
[{ name: "fadeOut", duration: 2000 }],
initialInterval: 1000,
interval: 2000,
waitAllImages: false
}
});
});

.centerdiv {
margin:0px auto;

}


Brownstone Furniture | Home



body {
width: 100%;
overflow:hidden, margin:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
display: block;
padding: 0px;
z-index: 101;
}
html {width:100%; height:100%; overflow:hidden}

a img {border:none;}
#controlpanel {
z-index: 101;
}

Droideka over 5 years ago

Simple with Foundation 5

Use .offset and .end class

Live exemple : http://jsfiddle.net/gRtrX/25/

<div class="row">
    <div class="large-4 medium-4 medium-offset-4 large-offset-4 columns end">
        your content
    </div>
</div>

Lyn over 5 years ago

Hey there,

From what I've seen on your website, and because you still seem to struggle, you can use this on the main page (in the <style></style> tags) :

#my-slider-id {
     margin: 0 auto;
}

and this for the other pages which needs to be centered too (like collections.html or products.html for example) :

#Table_01 {
     margin: 0 auto;
}

I would nevertheless suggest that you find/hire/whatever someone with some experience to take a look at your code as it is not very clean/standard/nice.

Best regards,

Lyn.

Steve Trask over 5 years ago

hi Bridget,

You can also use the class in the grid small-centered reference on this page http://foundation.zurb.com/docs/components/grid.html

Hope this helps

Steve

georgekaprio over 1 year ago

http://allsportsreporter.com/ufc-fight

http://sportslivestreaming.us/ufc-live

http://sportlivestream.us/mma-fight

vaynenick 17 days ago
vaynenick 17 days ago