Question

我试图将它们集中在一起，以便它们显示在中心内，但是棘手的部分是html在多个范围内（部分html是静态的，部分是来自数据库的动态）。 / p>

查看屏幕截图作为当前外观的示例（我希望此内容位于中心） http://postimg.org/image/5fc6ecgy7/

注意 - 该网站正在使用基础960网格系统以下是HTML：

<div class="">
<div class="">
    <div class="">
        <div id="national-prize-feed" class="panel-wrapper ">
            <div class="border">
            <div class="content clearfix add-radius">
            <div style="padding:10px 0px;">
            <div id="nation-prizes-collection" class="clearfix">
            <div class="summary"></div>
            <div class="">
                <div class="national-prizes">
                <div class="prizes">
                    <a href="ipod-shuffle"><img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png"></a>
                </div>
                </div>
                <div class="national-prizes">
                <div class="prizes">
                    <a href="football"><img class="prizes-img" alt="Football" src="/images/prizes/football.png"></a>
                </div>
                </div>
            </div>
            <div class="keys" title="/pages/index/slug/prizes" style="display:none">
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>

我的具体css（还有很多......它基于基于网格的布局）

div.prizes {
  float: left;
}

div.prizes img {
  width: 280px;
}

.prizes-img {
  padding: 0 7px 0 7px;
  margin: 7px 5px 7px 5px;
  max-width: 100%;
  height: auto;
}

Answer 1

为了将DIV定位到屏幕的中心，您需要将div的静态宽度设置为居中，左边：0px，右边：0px，相应的边距设置为自动。

以下是一个示例：http://jsfiddle.net/pR4hq/

<style>.center{
    position: relative;
    display: block;
    width: 120px;
    background: rgb(90,90,90);
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</style>
<div class="center">Center Content</div>

在多个嵌套div中居中div内容

1 个答案: