Question

所以我试图将我的按钮和图像居中，所以当页面变小时，它仍然应该在中间对齐。我的按钮也没有居中。

我试图让它看起来像：https://www.unrealengine.com

尝试移动页面，看看会发生什么。

.header {
  width: 100%;
  height: auto;
}

.header img {
  width: 100%;
  height: auto;
  z-index: -1;
}

.header h1 {
  margin: 0;
  height: auto;
  width: auto;
  position: absolute;
  top: 20%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
}

.myButton {
  display: inline-block;
  text-align: center;
  position: relative;
  height: auto;
  background-color: #10b4f5;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 16px 31px;
  text-decoration: none;
}

.myButton:hover {
  background-color: #008fc7;
}

.myButton:active {
  position: relative;
  top: 1px;
}

<div class="header">
  <img src="images/background2.jpg" alt="background">
</div>
<a href="#" class="myButton">EXPLORE</a>

Answer 1

垂直和水平居中的最简单方法是使用display flex。使用对齐项和对齐内容，这可以很容易地完成。有关详细信息，请参阅：A Complete Guide to Flexbox

＆＃13;

header {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

＆＃13;

<header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <button>CTA Here</button>
</header>

＆＃13;

修改此代码段基于OP自己的代码。当您可以使用HTML5标头标签时，无需使用带有标题类的div。

＆＃13;
＆＃13;
header { background-image: url(images/background2.jpg); display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center; height: 100vh; width: 100vw; } .myButton { background-color: #10b4f5; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer; color: #ffffff; font-family: Arial; font-size: 17px; padding: 16px 31px; text-decoration: none; } .myButton:hover { background-color: #008fc7; }
＆＃13;
<header> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <a href="#" class="myButton">EXPLORE</a> </header>
＆＃13;
＆＃13;
＆＃13;

Answer 2

试试这段代码。

HTML

<div class="header-wrap">
  <div class="header">
    <img src="images/background2.jpg" alt="background">
  </div>
  <a href="#" class="myButton">EXPLORE</a>
</div>

CSS

.header-wrap {
  text-align: center;
}

.header {
  width: 100%;
  height: auto;
}

.header img {
  width: 100%;
  height: auto;
  z-index: -1;
}

.header h1 {
  margin: 0;
  height: auto;
  width: auto;
  position: absolute;
  top: 20%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
}

.myButton {
  display: inline-block;
  text-align: center;
  position: relative;
  height: auto;
  background-color: #10b4f5;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 16px 31px;
  text-decoration: none;
}

.myButton:hover {
  background-color: #008fc7;
}

.myButton:active {
  position: relative;
  top: 1px;
}

Answer 3

文本的对齐在包含文本的元素中指定，因此在这种情况下，您应在包含按钮的元素中指定pass.getText()。像这样：

text-align: center;

并在CSS中

<div class="button-container">
    <a href="#" class="myButton">EXPLORE</a>
</div>

浏览器移动中的中心按钮和图像

3 个答案: