以固定的DIV块为中心，而不是其内容

时间：2014-01-02 22:45:59

标签： javascript html css

- 我使用Div创建了一个导航栏
- 我已经为它指定了宽度/高度
- 我已经调整了填充值以使其看起来不错
- 我已将“top”设置为0，以便在滚动页面时消除任何泄漏
- 我已经设置了一个固定位置，因此它始终位于页面顶部，而用户在页面上向下滚动

我可以如何在世界中居中DIV块（同时不调整内部元素）？我尝试了“中心”标签，但无济于事。

enter image description here

这是我的代码：

<html>
<body>

<div align=right style="width:465px;padding-top:10;padding-right:20;top: 0;height:40px;position: fixed;background-color:#ff0000">
logo image here
</div>

</body>
</html>

6 个答案:

答案 0 :(得分：2)

由于你有一个固定的宽度，只需使用：

left:50%;
margin-left:-242.5px;

这里的余量等于485像素总宽度的一半，包括20px的水平填充。

答案 1 :(得分：1)

包裹它，然后居中。

JSBin Live Demo

HTML：

<div class="wrap">
    <div class="inner"></div>
</div>

CSS：

.wrap {
    width: 100%;
    position: fixed;
    top: 0;
 }
 .inner {
    width: 465px;
    text-align: right;
    margin: 0 auto
 }

答案 2 :(得分：1)

将left和right设置为“0”，margin-left和margin-right设置为auto，以fixed或{{为中心1}}定位项目：

HTML

   

absolute

   

CSS：

  <div align=right class="nav">
    logo image here
  </div>

实例：http://codepen.io/anon/pen/Lxonm

答案 3 :(得分：0)

尝试

 margin:0 auto;

这应该使你的Div水平居中。

编辑：是的，不在固定位置。

答案 4 :(得分：0)

如果您不知道元素尺寸，可以使用

position: fixed;
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

答案 5 :(得分：0)

这也可以：

.blaat {
width:465px;
padding-top:10;
padding-right:20;
top: 0;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
height:40px;
position: fixed;
background-color:#ff0000;
}

这是{{3p>

相关问题
最新问题