-2

いくつかのdivを中央に配置したい場所に作成しているjqueryウィジェットがあります。これが私がやろうとしているコードです、私はそれを機能させることができないようです。

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);
});
}

人々は私の質問を気に入らないようですので、もう少し説明させてください。私は常に「margin：0 auto」を使用してdivを中央に配置しました。実際、これは、以下にリンクされているページ（easyuniv.com/staging）の本文を中央に配置する方法です。呼び出されたdiv内にナビゲーションを作成するこのjavascript関数があります。変数コンテナーはそれが呼び出されるdivであり、その幅を100％に設定してから、その中にdiv（centと呼ばれる）を追加します。これには、margin-leftとmargin-rightautoがあります。

何らかの理由で、これをdivの中央に配置することができず、その理由を理解しようとしています。

助けてくれてありがとう

4

2 に答える 2

2

さて、あなたの問題を手に入れました。このCSSを使用します。

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

スクリーンショット：

于 2012-10-15T06:58:26.517 に答える
1

var styleText次のスタイルで変更してください

    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;}";

これがお役に立てば幸いです

于 2012-10-15T06:57:25.977 に答える