在 jquery 小部件中以边距自动居中

Posted 2023-03-05

【中文标题】在 jquery 小部件中以边距自动居中

【英文标题】：centering with margin auto in a jquery widget

【发布时间】：2012-10-05 02:36:41

【问题描述】：

我正在制作一个 jquery 小部件，我想将一些 div 居中。这是我试图做的代码，我似乎无法让它工作。

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)。我有这个 javascript 函数，它在调用它的 div 内创建我的导航。变量容器是调用它的 div，我将它的宽度设置为 100%，然后在其中附加一个 div（称为 cent），它具有自动边距左和边距右。

由于某种原因，我无法将其置于我的 div 中心，并试图找出原因。

感谢您的帮助

【问题讨论】：

我猜你没学过英语，如果是的话，我原谅你。 :P你可以只专注于特定的代码，而不是发布整个代码！

还有，你为什么需要 jQuery 来让它们居中？你不能只使用CSS吗？此外，CSS 和 HTML 在哪里？有预览吗？有fiddle吗？

这个函数只是在一个div的jQuery对象上调用，然后创建这个部分。由于我正在做的事情的性质，我需要 jQuery 来应用 css。至于发布太多代码，抱歉，不想遗漏任何内容。

好的，有什么地方可以看到预览吗？或者访问网站？你能给我们一个fiddle吗？

你也应该看看这个link

【参考方案1】：

好的，有你的问题。使用这个 CSS：

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

截图：

【讨论】：

我最终找出了我的问题，我需要在一个地方进一步扩大 div 的范围，有效地做到了你所说的在此处添加，谢谢你的帮助！对于措辞不当的问题，我们深表歉意

【参考方案2】：

使用以下样式更改您的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;";

希望这会有所帮助