1

我有一个包含一些内容的全宽背景图像。最后，我想将我的按钮放置在中心（垂直和水平），但是使用position:absolute，那不起作用。您可以在JSFiddle中看到它。

我的 CSS 中有一些代码行

.buttons{
    position:relative;
}

.buttons .button-pos{
  width:100%;
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

我想要的几乎没有什么计划。 在此处输入图像描述

4

3 回答 3

2

1.）你的.buttonsdiv 没有高度，所以首先你需要为它定义一个高度，否则就没有垂直居中的可能性（我在小提琴中将它设为 200px）。

2.) 要.button-pos在 内居中.buttons，请使用

.button-pos {
  width: 100%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

这是小提琴：https ://jsfiddle.net/Luo1k7Lt/1/

于 2016-10-21T21:49:25.317 回答
1

我自己做了一些解决方案，现在效果很好，我决定将我所有的内容放在中心，即标题中的内容。屏幕尺寸只有一些小的变化，而且效果很好:)

#welcome-header .welcome-content{
    width: 80%;
    height: 400px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.buttons{
    margin-top: 40px;
}

如果有人有更好的解决方案，请写在那里:)

于 2016-10-21T22:08:59.060 回答
0

试试这个：

.buttons .button-pos { display: inline-block; zoom: 1; }

一个简单的 IE hack 是添加display*: inline;该 CSS 规则

于 2016-10-21T21:52:15.507 回答