4

我刚刚遇到了一些事情

#element {
    left: 50%;
    margin-left: -(elemntwidth/2)px; 
}

是 (elemntwidth/2) 已经是一个像 30px 这样的数字，例如。

我想知道这是否是交叉浏览响应式元素定位的安全方式，所以我可以放弃我现在使用 .jQuery 的方式

$('#element').css(left: (screenwidth - element / 2) + 'px');

最重要的是我对跨移动设备浏览器有效的解决方案感兴趣，并且只有这个 css 我发现它干净简单，如此简单以至于我需要询问这是否是真的。谢谢

4

5 回答 5

2

CSS 框架具有此功能。结帐：Foundation 3

否则，您将需要严重依赖 Javascript 和媒体查询来实现像素完美。

更不用说这是实现跨设备/浏览器稳定元素时遇到的许多问题中的第一个。所有这些事情都已经为您仔细考虑过了。

于 2013-01-08T20:56:58.133 回答
2

这是一种方式。对于某些元素，它可以工作，响应式，居中且没有 jQuery。

HTML

<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>

CSS

.element {
     position: relative;
     width: 90%;
     background: black;
     margin: 0 auto 10px;
     text-align: center;
     color: white;
     padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}

工作演示| 最终结果全屏

于 2013-01-08T21:04:36.133 回答
1

使用此代码段：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -(height/2);
  margin-left: -(width/2);
}

即使父尺寸发生变化，这也有效。

于 2013-01-08T21:03:42.563 回答
1

您拥有的代码将起作用 - 我已经多次使用相同的方法 - 只要您知道要居中的元素的尺寸。

请注意，您可以使用相同的方法使用基于百分比的宽度来更好地处理响应式布局。

你在正确的轨道上。

于 2013-01-08T21:28:43.517 回答
1

AFAIK 这个解决方案是浏览器兼容的。它甚至比 {margin-left:auto; margin-right:auto;} 在某些情况下。但是以这种方式将 DOM 元素居中还有另一个有趣的点：

例如，如果您的整个页面包装器以 {left:50%,...} 为中心，并且浏览器窗口宽度小于包装器，则您无法通过左右滚动来查看整个内容。浏览器剪切内容。尝试一下...

尝试左右滚动查看白色的左右边框...

另一个已知的解决方案是设置 {margin-left:auto; margin-right:auto;} 但 afaik 这只能与 {position:relative;} 一起使用 - 而不是与 {position:absolute;}-elements 一起使用

我开始使用这种非常规的解决方案已经很长时间了......

于 2013-01-08T21:34:41.867 回答