html - 尝试将主横幅居中，响应文本左对齐

Question

我正在尝试将位于导航栏正下方的横幅 img 居中。我想把文字放在上面，左对齐。我已经能够做到这一点，但图像上的文字根本没有响应。如何使文本在浏览器更改大小时更改大小？另外，我认为我的 CSS 无处不在，所以如果您对此有任何建议，我们将不胜感激!

这是标记:

.topimage img {
  position: relative;
  width: 100%;
  padding-top: 10px;
}

li {
  list-style-type: none;
}

h1 {
  z-index: 100;
  position: absolute;
  color: #272727;
  font-size: 45px;
  font-weight: normal;
  left: 650px;
  top: 250px;
  font-family: Helvetica Neue, arial, serif;
}

.maintitle p {
  z-index: 100;
  position: absolute;
  color: #272727;
  font-size: 17px;
  font-weight: normal;
  left: 650px;
  top: 390px;
  font-family: Helvetica Neue, arial, serif;
}

.maintitle ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.maintitle li {
  z-index: 100;
  position: absolute;
  color: #272727;
  font-size: 15px;
  font-weight: bold;
  left: 650px;
  top: 470px;
  font-family: Helvetica Neue, arial, serif;
  border-style: solid;
  border-width: medium;
  border-color: #272727;
  border-radius: 6px;
  padding: 6px;
}

a:visited {
  text-decoration: none;
  color: #272727;
}

.maintitle a:hover {
  background-color: #6db618;
  border-color: #6db618;
  color: white;
}

.maintitle li:hover {
  background-color: #6db618;
  border-color: #6db618;
  color: white;
}

<div class="topimage">
  <img alt="plant" src="images/main.png" />
</div>
<div class="maintitle">

  <h1>Marketing Communications & <br> Digital Design</h1>
  <p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p>
  <ul>
    <li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
  </ul>
</div>

这就是我要实现的目标: enter image description here

Answer 1

这里有几个问题。然而，最重要的是您对 absolute 定位的使用。这是完全没有必要的。您真正需要做的就是使用 auto 的 margin 使元素居中。

在这种情况下，我们可以将它们移动到一个包装元素中，而不是分别定位 h1、p 和 ul。

如果你想根据屏幕宽度缩小实际字体大小，请使用 font-size: 10vw;

.wrap{
  margin: 200px auto 0;
  min-width: 320px;
  max-width: 500px;
}

.topimage img {
  position: relative;
  width: 100%;
  padding-top: 10px;
}

li {
  list-style-type: none;
}

h1 {
  z-index: 100;
  color: #272727;
  font-size: 45px;
  font-weight: normal;
  top: 250px;
  font-family: Helvetica Neue, arial, serif;
}

.maintitle p {
  z-index: 100;
  color: #272727;
  font-size: 17px;
  font-weight: normal;
  top: 390px;
  font-family: Helvetica Neue, arial, serif;
}

.maintitle ul {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
}

.maintitle li {
  z-index: 100;
  color: #272727;
  font-size: 15px;
  font-weight: bold;
  font-family: Helvetica Neue, arial, serif;
  border-style: solid;
  border-width: medium;
  border-color: #272727;
  border-radius: 6px;
  padding: 6px;
}

a:visited {
  text-decoration: none;
  color: #272727;
}

.maintitle a:hover {
  background-color: #6db618;
  border-color: #6db618;
  color: white;
}

.maintitle li:hover {
  background-color: #6db618;
  border-color: #6db618;
  color: white;
}

<div class="topimage">
  <img alt="plant" src="images/main.png" />
</div>
<div class="maintitle">

  <div class="wrap">
    <h1>Marketing Communications & <br> Digital Design</h1>
    <p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p>
    <ul>
      <li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
    </ul>
  </div>

</div>