Question

这本书令人困惑......我又回答了另一个问题。

这本书展示了最后一章的图片，显然我遇到了问题。

问题1：我需要将图片居中（我知道该怎么做），但我不知道如何在图片后面对齐一个句子。以后，我的意思是它看起来像这样的图片：

但是居中的文本需要与图像保持对齐，当它到达页面的末尾时，它会启动图片下的文本而不是居中。

我很确定这与我的包装器有关，但我不能100％确定它是什么。

控制以下大部分视觉内容的CSS文件：

header {
  background-color: #ccaa66;
  color: #000000;
  text-align: center;
}

h1 {
  line-height: 200%;
}

body {
  background-color: #ffffaa;
  color: #330000;
  font-family: Verdana;
  background: url(background.gif);
  padding: 25px;
}

nav {
  text-align: center;
}

footer {
  background-color: #ccaa66;
  color: #000000;
  font-size: 0.60em;
  font-style: italic;
  text-align: center;
  padding: 5px;
}

#wrapper {
  background-color: #ffffaa;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  min-width: 700px;
  max-width: 1024px;
}

h2 {
  background-color: #ccaa66;
  font-size: 1.2em;
  padding-left: 10px;
  padding-bottom: 5px;
}

.details {
  padding-left: 20%;
  padding-right: 20%;
}

img {
  border: 0px solid;
}

现在，我正在加载有问题的html页面是一个"music"页面，因为我无法上传所有必要的项目，您需要完全构建页面，我将不得不用明智的话去。

music.html页面的编码如下：

<!DOCTYPE html>
<html lang="en">

<link rel="stylesheet" href="javajam.css">

<header>
  <title> JavaJam Coffee House Music</title>
  <meta charset="utf-8">
  <h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>

<nav>
  <a href="index.html">Home</a> &nbsp;
  <a href="menu.html">Menu</a> &nbsp;
  <a href="music.html">Music</a> &nbsp;
  <a href="jobs.html">Jobs</a>
</nav>

<body>
  <div id="wrapper">
    <p> The first Friday night each month at JavaJam is a special night. Join us from 8pm to 11pm for some music you won't want to miss! </p>
    <h2> January </h2>
    <p align="center"><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
    <h2> February </h2>
    <p align="center"><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
  </div>
</body>

<footer>
  <em>Copyright &copy 2014 JavaJam Coffee House</em> <br>
  <a href="mailto:Johnathon@Olivas.com">Johnathon@Olivas.com</a>
</footer>

</html>

我真正想要的只是一种让图片显示的方法，文字在图片的右下角，当它到达页面的"end"时，它会回来和图片下的星星而不是中心对齐。即<br>所在的位置，将文字明星重新置于图片下方会更好。

如果您需要更多信息，我会尽力提供，但正如我之前所说，我无法在作业中提供实际图片。

如何将图片居中并左对齐触摸所述图片的文本？ HTML5

0 个答案: