使用Javascript / JQuery将<div>以最大宽度居中

问题描述

|| 我一直在寻找一种以最大宽度设置div为中心的方法。我以为我可以通过给div一个90％的最大宽度和一个自动页边距来做到这一点，然后使用jQuery查找并设置一个固定宽度，我希望自动页边距能对我来说居中。类似于以下内容。 jQuery的：

$(function(){
    $wrap = $(\'#wrap\');

    $wrap.width($wrap.width());
});

CSS：

#wrap {
    max-width:90%;
    margin:auto;
}

HTML：

<div id=\"wrap\">
     <img src=\"http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png\" />
     <img src=\"http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png\" />
     <img src=\"http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png\" />
     <img src=\"http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png\" />
     <img src=\"http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png\" />
</div><!-- end div id=\"wrap\" -->

因此，基本上，我想包装一个div，以便可以塞满图像，但不会超过90％的屏幕宽度；拿起包装纸并居中。这可能吗？我了解我的JQuery思想几乎肯定是错误的。我对此很陌生，但我认为使用Javascript是解决此问题的方法。

解决方法

不需要Javascript，一切都很好。 http://jsfiddle.net/Kyle_Sevenoaks/RvLuE/ , 万一其他人感到好奇，我想出了一种JQuery方式来做我想做的事情。我在可缩放的div中有一堆均匀大小的图像，该图像也具有90％的最大宽度。这是我想出的： jQuery的：

function divResize() {
var divWidth;
var extra;
divWidth = $(window).width() * .9;
extra  = divWidth % /*IMAGE SIZE IN PX*/;
divWidth = (divWidth - extra);
  $(\"#wrap\").css({ width: divWidth });
}

$(document).ready(divResize);
$(window).resize(divResize);

CSS：

#wrap {
    margin:auto;
}

HTML：

<div id=\"wrap\">
    <img src=\"/images.png\" />
    <img src=\"/images.png\" />
    <img src=\"/images.png\" />
    <img src=\"/images.png\" />
    <img src=\"/images.png\" />
</div>

我想我的真正问题是我无法充分解释我的问题。感谢大家的帮助。 , 这里什么不工作？这对我来说很好用，但我认为您不需要JavaScript吗？

<html>
<body>
    <style>
        body { }
        #wrap {max-width: 90%; margin: auto; background-color: red}
    </style>
    <div id=\'wrap\'>a a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa a<br/>a</div>

, 如果您想使可能的短行居中，请将wrap \的text-align设置为居中，或在需要显示边框时将其设置为display：inline-block。

div div javascript jquery 使用使用使用宽度宽度居中居中最大最大