centering with margin auto in a jquery widget

Question

I have a jquery widget I am making where I want to center some divs. here is the code I have trying to do it, I cant seem to get it to work.

jQuery.fn.nav = function(home, eat, sleep, drink) {
//store the jQuery object(s) for later use
var elements = this;

return this.each(function() {
    var containerElement = this;
    var container = jQuery(this);
    container.css('width', '100%');
    container.css('text-align', 'center');

    var centElement = document.createElement('div');
    var cent = jQuery(centElement);
    cent.css('overflow', 'auto');
    cent.css('width', '275px');
    cent.css('margin-left', 'auto');
    cent.css('margin-right', 'auto');

    if(home == true) {
        var navElement = document.createElement('div');
        var nav = jQuery(navElement);
        nav.addClass('inactive');
        nav.attr('id', 'home');
        cent.append(nav);
    }
    if(eat == true) {
        var navElement = document.createElement('div');
        var nav = jQuery(navElement);
        nav.addClass('inactive');
        nav.attr('id', 'eat');
        cent.append(nav);
    }
    if(drink == true) {
        var navElement = document.createElement('div');
        var nav = jQuery(navElement);
        nav.addClass('inactive');
        nav.attr('id', 'drink');
        cent.append(nav);
    }
    if(sleep == true) {
        var navElement = document.createElement('div');
        var nav = jQuery(navElement);
        nav.addClass('inactive');
        nav.attr('id', 'sleep');
        cent.append(nav);
    }
    container.append(cent);
    //put together the styling used
    var styleText = "#" + containerElement.id + " div {width: 60px; height: 60px; float: left;";
    styleText += " margin-left: 5px; margin-right: 3px;}";
    styleText += "#" + containerElement.id + " div a {display: block; width: 100%; height: 100%;}";
    styleText += "#" + containerElement.id + " #home.inactive {background-image:url(img/inactive_home.png); background-size: cover;}";
    styleText += "#" + containerElement.id + " #eat.inactive {background-image:url(img/inactive_eat.png); background-size: cover;}";
    styleText += "#" + containerElement.id + " #sleep.inactive {background-image:url(img/inactive_sleep.png); background-size: cover;}";
    styleText += "#" + containerElement.id + " #drink.inactive {background-image:url(img/inactive_drink.png); background-size: cover;}";
    styleText += "#" + containerElement.id + " #home.active {background-image:url(img/active_home.png); background-size: cover;}";
    styleText += "#" + containerElement.id + " #eat.active {background-image:url(img/active_eat.png); background-size: cover;}";
    styleText += "#" + containerElement.id + " #sleep.active {background-image:url(img/active_sleep.png); background-size: cover;}";
    styleText += "#" + containerElement.id + " #drink.active {background-image:url(img/active_drink.png); background-size: cover;}";
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = styleText;
    document.getElementsByTagName('head')[0].appendChild(style);
});
}

Let me explain a little more since people seem to not like my question. I have always used 'margin: 0 auto' to center a div, in fact that is how I am centering the body of the page linked below (easyuniv.com/staging). I have this javascript function that creates my navigation inside of the div it is called on. The variable container is the div that it is called on, and I set its width to 100% and then append a div(called cent) into it, which has margin-left and margin-right auto.

For some reason I can't get this to center my div and am trying to figure out why not.

Thanks for any help

*I guess you haven't been taught English, if so, I forgive you.* `:P` You could have concentrated on the specific code alone, instead of posting the whole code! — Praveen Kumar Purushothaman, Oct 15 '12 at 06:18
And yah, why do you need jQuery to center them? Cant you just use CSS? Moreover, where is the CSS and HTML? Any preview? Any [fiddle](http://jsfiddle.net/)? — Praveen Kumar Purushothaman, Oct 15 '12 at 06:19
this function is just called on the jQuery object of a div, and then creates this section. Due to the nature of what im doing i need the jQuery to apply the css. As far as posting too much code, sorry, didn't want to leave anything out. — Troy Cosentino, Oct 15 '12 at 06:22
Okay, is there anywhere we can see the preview? Or access the site? Can you make us a [fiddle](http://jsfiddle.net)? — Praveen Kumar Purushothaman, Oct 15 '12 at 06:23
you should probably take a look at this [link](http://stackoverflow.com/questions/220603/is-there-a-best-practice-for-generating-html-with-javascript) as well — Jacob George, Oct 15 '12 at 06:31
OKay, there's something like many numbers. What am I supposed to do? And the whole content is appearing centred. — Praveen Kumar Purushothaman, Oct 15 '12 at 06:32
@PraveenKumar I think the OP wants the 4 divs (home,eat, drink and sleep) to be centered — Jacob George, Oct 15 '12 at 06:33
im trying to get the four nav buttons (home, eat, sleep, drink) to be centered. The code above generates that part of the page — Troy Cosentino, Oct 15 '12 at 06:34

score 2 · Accepted Answer · answered Oct 15 '12 at 06:58

2

Okay, got your issue. Use this CSS:

#hesd div {margin: 25px auto 10px; float: none;}

Screenshot:

answered Oct 15 '12 at 06:58

Praveen Kumar Purushothaman

164,888
24
203
252

i ended up figuring out my problem, i needed to scope in one further div in one spot that effectively did what you said to add here, thanks for your help! and sorry for the poorly worded question – Troy Cosentino Oct 15 '12 at 07:02

score 1 · Answer 2 · answered Oct 15 '12 at 06:57

Change your var styleText with the following style

    var styleText = "#" + containerElement.id + " div {width: 60px; height: 60px;";
    styleText += " margin-left: 5px; margin-right: 3px;}";
    styleText += "#" + containerElement.id + " div a {display: block; width: 100%; height: 100%;}";
    styleText += "#" + containerElement.id + " #home.inactive {background-image:url(img/inactive_home.png); background-size: cover;float:left;}";
    styleText += "#" + containerElement.id + " #eat.inactive {background-image:url(img/inactive_eat.png); background-size: cover;float:left;}";
    styleText += "#" + containerElement.id + " #sleep.inactive {background-image:url(img/inactive_sleep.png); background-size: cover;float:left;}";
    styleText += "#" + containerElement.id + " #drink.inactive {background-image:url(img/inactive_drink.png); background-size: cover;float:left;}";
    styleText += "#" + containerElement.id + " #home.active {background-image:url(img/active_home.png); background-size: cover;float:left;}";
    styleText += "#" + containerElement.id + " #eat.active {background-image:url(img/active_eat.png); background-size: cover;float:left;}";
    styleText += "#" + containerElement.id + " #sleep.active {background-image:url(img/active_sleep.png); background-size: cover;float:left;}";
    styleText += "#" + containerElement.id + " #drink.active {background-image:url(img/active_drink.png); background-size: cover;float:left;}";

Hope this will help

centering with margin auto in a jquery widget

2 Answers2

Okay, got your issue. Use this CSS:

Screenshot: