Question

我是新来的，也是HTML新手：D

刚遇到问题，发现Stackoverflow有很多令人惊讶的开发人员，所以我在这里抛出我的问题，等待你的帮助！

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cafe</title>
    <style>
    #container {
        width:550px;
        height:733px;
        position:relative;
    }

    img#containerImage {
        position:absolute;
        left: 0;
        top: 0;
    }

    h1#header {
        z-index: 100;
        position: absolute;
        color: white;
        font-size:24px;
        font-weight:bold;
        border:1px solid red;
        margin: 0px;
        vertical-align: middle;
        text-align: center;
    }
</style>
</head>

<body>
    <div id="container">
        <img id="containerImage" src="olgagonggam.jpg"/>
        <h1 id="header">Cafe</h1>
    </div>
</body>
</html>

这就是我编码的内容。我想知道为什么文本没有设置在中间/中心，以及如何解决这个问题？文本显示在页面的左上方，但我想将其设置在图像的中心。有人请帮帮我！：d

Answer 1

如果图像的大小已知（问题并未完全清楚）并且h1的大小也已知，则可以简单地指定位置（以像素为单位）。在这种情况下，将左侧放置在图像宽度的一半（275px）减去h1宽度的一半（30px），将顶部放置在图像高度的一半（367px）减去h1高度的一半（15px）。

＆＃13;

#container {
  width: 550px;
  height: 733px;
  position: relative;
}
img#containerImage {
  position: absolute;
  left: 0;
  top: 0;
}
h1#header {
  z-index: 1;
  position: absolute;
  left: 245px;
  top: 352px;
  width: 60px;
  line-height: 30px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border: 1px solid red;
  margin: 0;
}

＆＃13;

<div id="container">
  <img id="containerImage" src="http://lorempixel.com/550/733" />
  <h1 id="header">Cafe</h1>
</div>

＆＃13;

如果您不想以像素为单位对硬件进行硬编码，则会变得更加棘手。我提出了这个解决方案，但它并没有围绕h1的边界。

＆＃13;

#container {
  width: 550px;
  height: 733px;
  position: relative;
}
img#containerImage {
  position: absolute;
  left: 0;
  top: 0;
}
h1#header {
  z-index: 1;
  position: absolute;
  top:50%; left:0; width:100%;
  color: white;
  font-size: 24px; line-height:0;
  font-weight: bold;
  text-align:center;
}

＆＃13;

<div id="container">
  <img id="containerImage" src="http://lorempixel.com/550/733" />
  <h1 id="header">Cafe</h1>
</div>

＆＃13;

为什么我的文字对齐＆amp; vertical-align不能与图像一起使用？

1 个答案: