为什么这个div不在屏幕上？

2018-06-27 02:46:52

在我做了一些更改后，我的反馈div不再集中在屏幕上，我无法弄清楚原因。

要中心一个元素，只需要设置宽度，然后只做margin: 0 auto ; 这通常应该足够了。

目标是让div显示在屏幕的顶部，居中。你可以在这里看到我的fiddel：

http://jsfiddle.net/3u3fd/

码：

#feedback {
  position: fixed;
  top: 0px;
  min-height: 50px;
  width: 300px;    
  margin: 10px auto;
  z-index: 9000;
  font-weight: bold;
  line-height: 24px;
  border: solid 1px #d1d2d1;
  padding: 10px;
  background-color: #f7f2e7;
  display: none;
  border-radius: 5px;  
  -moz-border-radius: 5px; /* FF < 4.0 */
  -webkit-border-radius: 5px;     /* Rounded corners for Safari */ 
}

#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }



<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>

任何帮助感谢！

auto边距不适用于position: fixed元素。

相反，你需要这样做：

left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;

其中X = Y/2 。

（ box-sizing: border-box可以确保即使你有填充或边框，它仍然会居中，如果干扰到所需的宽度，则将其除去并减去padding-left + border-left-width的值padding-left + border-left-width从margin-left的margin-left 。）

你有一个固定的位置集。摆脱它，它会中心很好。

为了margin: 0 auto; 要工作，父元素必须具有指定的宽度。它可以是百分比或单位，但它必须有它。

对于这种解决方案在这种情况下工作，你需要删除位置：fixed; 和顶部声明并添加一个包装元素。

http://jsfiddle.net/3u3fd/16/

链接地址: http://www.djcxy.com/p/75809.html

上一篇: Why isn't this div centerd on screen?

下一篇: absolute position on the center of current screen position