小编Mat*_*ja 的帖子

如何在 HTML 和 CSS 中将文本放置在图像上方

我有一个无法找到答案或不知道如何搜索答案的问题。

我不知道如何以我希望它们对齐的方式将文本放置在图像上方。下图将澄清我的要求。

接下来是我的 HTML 和 CSS 代码，我只提供了关于页面的 HTML，但 CSS 是针对整个网站的。这不是什么专业的事情，我只是想边做边学。我的想法是使用这些图像作为链接（我知道该怎么做）。如果已经有人问过类似的问题，我很抱歉，我尝试在此处和 YouTube 上搜索，但找不到此问题的解决方案。如果不出意外的话，我会在 GIMP 中编辑带有文本的图片。

body {
  background: #e5fcf4;
  font-family: Arial;
}

header {
  text-align: center;
}

header nav {
  display: inline-block;
}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header ul li {
  float: left;
  color: white;
  width: 200px;
  height: 40px;
  background-color: #0d3801;
  opacity: .9;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

header ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

header ul …

Run Code Online (Sandbox Code Playgroud)

html css image css-position

Mat*_*ja

2018 03-19

4
推荐指数

1
解决办法

1万
查看次数