Question

我正在尝试将菜单栏水平居中放置在页面的标题中。出于某种原因，我无法让中心工作。我做了一个粗略显示问题的小测试页：JSFiddle。内部div必须距离底部5px，这就是我使用position: absolute。

我尝试在网上搜索很多，但我发现的一切都给了我相同的结果，或者根本没有。我发现的大多数问题都是text-align: center不在容器div中，但即使使用它，它仍然不起作用。

Answer 1

我删除了两个css属性并且它可以正常工作。

position: absolute;
bottom: 5px;

选中此Fiddle

从底部5px。 Fiddle

Answer 2

这不是一个完美的方式，但它仍然有用。我首先从this Q&A想到这个想法。

您必须对HTML进行一些更改：

<div id="container">
    <div id="wrapper-center"> <!-- added a new DIV layer -->
        <div id="inner_container">
            TEXT ELEMETNES IN THIS THING!!!!
        </div>
    </div>
</div>

CSS将改为：

#container {
    background: black;
    width: 100%;
    height: 160px;
    position: relative;
}
#inner_container {
    display: inline-block;
    width: auto;
    color: white;
    background-color: #808080;
    padding: 5px;
    position: relative;
    left:-50%;
}
#wrapper-center {
    position:absolute;
    left:50%;
    bottom:5px;
    width:auto;
}

Demo fiddle

诀窍是将包装器放在给定的上下位置，并从左侧50%放置（与父相关），然后将真实内容50%放到左侧（与包装器相关）），从而使其成为中心。

但是陷阱是，包装器只会是父容器宽度的一半，因此内容：在屏幕较窄或内容较长的情况下，它会在“拉伸宽度足够”之前进行包装。

Answer 3

如果你不想在内部div上有固定的宽度，你可以做类似的事情

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

这使得内部div成为内联元素，可以使用text-align对中。

working Ex

Answer 4

如果您想要居中，则通常会提供宽度，然后将边距设为剩余总空间的一半。因此，如果您的内部div是外部div的70％，则将左右边距设置为15％。请注意，margin：auto会自动为您执行此操作。虽然左侧对齐，但您的文字仍会出现在一侧。使用text-align：center修复此问题。

PS：你真的不需要使用绝对位置来固定这样的东西，事实上它只是让事情变得更加困难和灵活性更低。

  * {
    margin: 0;
    padding: 0;
  }
    #container {
    background: black;
    width: 100%;
    height: 160px;
  }
  #inner_container {
    color:red;
    height:50px;
    width: 70%;
    margin:auto;
    text-align:center;
  }

Answer 5

此CSS更改将起作用：

#container {
    background: black;
    width: 100%;
    height: 160px;
    line-height: 160px;
    text-align: center;
}
#inner_container {
    display: inline;
    margin: 0 auto;
    width: auto;
    color: white;
    background-color: #808080;
    padding: 5px;
    bottom: 5px;
}

Answer 6

试试这个：

<强> HTML

<div id="outer"><div id="inner">inner</div></div>

<强> CSS

#outer {
    background: black;
    width: 100%;
    height: 160px;
    line-height: 160px;
    text-align: center;
}
#inner{
    display: inline;
    width: auto;
    color: white;
    background-color: #808080;
    padding: 5px;
    bottom: 5px;
}

example jsfiddle

Answer 7

您可以为内部div设置内联样式。

HTML：

  <div id="container">
    <div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
       <div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
    </div>
  </div>

这是有效的DEMO

不能将div放在另一个div中

7 个答案: