Question

＆＃13;

body {
  background: url('background.jpg')
}
header {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100px;
  margin: auto;
  text-align: center;
}
h2 {
  position: relative;
  font-size: 44px;
  color: white;
  bottom: 15%;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  word-spacing: 4px;
}
p {
  text-align: center;
  color: black;
  font-size: 22px;
  font-family: 'Roboto Mono', ;
  border: 6px solid black;
  padding: 12px;
  width: 150px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>hhchh</title>
  <script type="text/javascript" src="N:\Desktop\Javascript\JS.js"></script>
  <link rel="stylesheet" type="text/css" href="N:\Desktop\Javascript\appStyle.css">
  <link href='http://fonts.googleapis.com/css?family=Orbitron:500' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Roboto+Mono:300' rel='stylesheet' type='text/css'>
</head>

<body>
  <header>
    <h2>text and stuff</h2>
    <p>button text</p>
  </header>
</body>

</html>

＆＃13;

我试图集中注意力并且它不起作用。

What I want

This is what I've been able to do so far但按钮宽度为100％，我希望它像100px

我尝试的事情 -

1）

position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

2）让它像桌子一样，如果我必须这样做，那么我觉得我最好用自举。

3）使用位置相对并使其看起来像中心。

4）

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

Answer 1

将按钮包裹在div中并使div具有text-align:center。像这样：

<div style="text-align:center">
    <button>Button Text</button>
</div>

这样，您就不必知道（或关心）按钮的确切宽度。

这是一个jsfiddle示例：https://jsfiddle.net/cjc50q1g/

更新：现在您已经发布了代码，我发现您可以将margin: 0 auto添加到您的“按钮”，这实际上是一个段落（见下文）。然而，出于反应原因，我并不喜欢将绝对宽度放在事物上。如果是我，我会用内联元素（<p>，<button>，<a>等替换<span>并将其换成{{1}与<div>一样，如上所述。

text-align:center;

body {
  background: url('background.jpg')
}
header {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100px;
  margin: auto;
  text-align: center;
}
h2 {
  position: relative;
  font-size: 44px;
  color: white;
  bottom: 15%;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  word-spacing: 4px;
}
p {
  text-align: center;
  color: black;
  font-size: 22px;
  font-family: 'Roboto Mono', ;
  border: 6px solid black;
  padding: 12px;
  width: 150px;
  margin: 0 auto;
}

Answer 2

这样做：

position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;

CSS集中的东西

2 个答案: