0

我遇到了以下css片段。它为具有 id搜索栏的元素提供绝对位置，宽度为300px27px，高度为 27px，并将搜索栏设置为50%从其正常位置开始

#search_bar {
  position:relative;
  width: 300px;
  left:50%;
  height:27px;
}

但我没有看到搜索栏在中心对齐。这是为什么 ？但是，如果我将代码段更改为：

#search_bar {
  position:relative;
  width: 300px;
  margin-left:-150px;
  left:50%;
  height:27px;
}

它与页面的中心对齐。那个怎么样 ？该属性margin-left:-150px如何将其设置为中心？

4

3 回答 3

2

left: 50% 将栏的开头放在屏幕中间，而不是居中。但是，如果您知道栏的宽度（300 像素），然后将其向左移动一半，那么栏的中间将位于屏幕的中间。那有意义吗？150 是 300 宽度的一半。如果条的宽度为 400，那么您将需要使用 -200。

于 2013-02-10T06:49:36.323 回答
2

这是因为您使用的是绝对位置，因此负边距是元素宽度的一半，因此它将元素向后移动了其总宽度的 1/2

position: absolute;
left: 50%; /* This shifts the element 50% from left, if you 
             don't want to use negative margins you can use 45%, 40% but you need 
             to fiddle with the measurements first */

在此处输入图像描述

所以计算就像

总容器宽度1000px

元素宽度300px

left：50%表示从左到右500px开始800px

所以这不是中心吗？

所以-150px从500px/* 500 剩下：50% */

你从350px到获取元素650px

于 2013-02-10T06:49:44.887 回答
0

通过使用相对定位，您可以允许块相对于它所在的位置移动static。 left: 50%将边距的左侧放置在包含定位块的一半处，这对您来说可能是视口（也称为浏览器窗口）。 margin-left: -150px然后将边距框的左侧从当前位置边距框向左移动 150px。由于您的总宽度为 300 像素，因此边框/内容框相对于包含定位的块居中。

于 2013-02-10T06:49:44.503 回答