【问题标题】:Fixed width centered content without wrapper div没有包装 div 的固定宽度居中内容
【发布时间】:2014-12-17 21:03:34
【问题描述】:

我有一个应该是全宽的 div(它有一个应该跨越整个页面的背景图像),我希望内容具有固定的宽度并居中。

有没有办法做到这一点,没有centered-content div:

<div class="background">
  <div class="centered-content">My content</div>
</div>

这就是我想要实现的(只有 一个 div):

编辑:我不希望文本居中。我想要一个400px 宽居中的文本框,其中包含左对齐的文本。

【问题讨论】:

标签: html css


【解决方案1】:

原来解决这个问题的方法,我刚刚想通了。

您可以使用calc() 设置填充。不幸的是,它涉及到一个部门,即not properly supported by android

#container {
  background: rgba(0, 255, 0, 0.1);
  padding: 6em calc((100% - 400px)/2);
}
<div id="container">
  One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.<br>
  He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.<br>
  His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.<br>
  A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops<br>
</div>

【讨论】:

    【解决方案2】:

    最简单的解决方案是添加到您的class="centered-content" margin: 0 auto;

    <div class="background">
      <div class="centered-content">My content</div>
    </div>
    
    * {
      margin: 0;
      padding: 0;
    }
    .background {
      width: 100%;
      background: #ddd;
    }
    .centered-content {
      width: 600px;
      margin: 0 auto;
      height: 400px;
      background: #c01;
    }
    

    DEMO

    【讨论】:

    • OP 明确提到“没有centered-content div”。
    • 使用文本对齐:居中
    • 我不想要centered-content div。我知道如何正确居中 div。
    • 我不希望文本居中,我希望整个块以特定宽度居中。
    【解决方案3】:

    您想摆脱centered-content div,仍然以固定宽度居中HTML?这不是真的可以实现,您可以将背景图像设置为主体,这样您就可以摆脱.background div,但是只有一个具有全宽背景但也以固定宽度居中的 div 不是可能。


    编辑

    当然你可以用 jQuery 来解决这个问题,这里有一个小例子:

    $(document).ready(function() {
        fixedWidth = 800;
        padding = ($(window).width() - fixedWidth) / 2;
        $(".background").css({paddingLeft: padding+"px", paddingRight: padding+"px"});
    });
    

    请记住,此代码未经测试,您可能需要进行更改。您还需要有一个 $(window).resize() 函数来捕捉屏幕宽度的变化,因为每次宽度变化时您都必须更新填充。

    【讨论】:

    • 问题是它在一页中有多个全宽div。所以我不能只是摆脱.background div。
    • 我原以为这也是不可能的,但我认为现在可能有技术可以实现这一点(比如灵活的填充或其他东西)
    • 我已经在我的答案中添加了一些代码,您可能会发现这很有帮助。
    • 没有 JavaScript 是不可能的布局。
    猜你喜欢
    • 2011-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-03
    • 1970-01-01
    • 2013-06-08
    相关资源
    最近更新 更多