Question

我正在为我的HTML课程在网站上工作，并遇到了一个小问题。我正在使用标签将我的页面分成几个部分，每个部分都有不同的类。如果可能的话，我希望我的图像包含在列表右侧创建的框内。

这是我到目前为止所提出的任何建议都将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>Halo Multiplayer Maps By Title</title>
    <link type="text/css" rel="stylesheet" href="my_halo_style.css" />
    </head>

    <body>
    <h1>Halo Multiplayer Maps by Title</h1>
    <p>
    There are so many different maps across the many Halo titles that it can even be difficult for the most devoted fans to keep track of which maps appear on each game.
    Below, I have compiled a list of each Halo title with its corresponding maps. 
    </p>
    <h2>Take Note:</h2>
    <p>
    Several of the later titles had numerous other multiplayer maps added through different map packs. 
    These extra maps are not included in the list below, but can be found by clicking the links to each title's informatino page.
    <img src="halo.jpg" title="Halo Logo" alt="Halo Logo" align="middle">
    </p>

    <div id="halo1">
    <h1>Halo:Combat Evolved</h1>
    <p>
    <ul>
        <li>Battle Creek</li>
        <li>Blood Gulch</li>
        <li>Boarding Action</li>
        <li>Chill Out</li>
        <li>Chiron TL-34</li>
        <li>Damnation</li>
        <li>Derelict</li>
        <li>Hang 'em High</li>
        <li>Longest</li>
        <li>Prisoner</li>
        <li>Rat Race</li>   
        <li>Sidewinder</li>
        <li>Wizard</li>
    </ul>
    <img src="Halo_Combat_Evolved.jpg" title="Halo:Combat Evolved" alt="Halo:Combat Evolved Cover" align="right" />
    </p>
    </body>
</html>

不知道它确实需要，但这是我用于课堂设计的外部样式表。

body 
            {
            background-color: black;
            color: blue;
            text-align: left;
            margin-left: 15%;
            margin-right: 15%;
            border: 10px double blue;
            padding: 20px 25px 20px 25px;
            font-family: sans-serif;
            }

#halo1 {background-color: black;
    color: green; 
    border: 5px outset green;
    padding: 10px;
    margin: 50px;
    width: 600px;
    text-align: left; }

 #halo2 {background-color: red;
    color: orange;
    border: 5px outset orange;
    padding: 10px;
    margin: 50px; 
    width: 400px;
    text-align: left; }

#halo3 {background-color: orange;
    color: black;
    border: 5px outset black
    padding: 10px;
    margin: 50px;
    width: 400px;
    text-align: left; }

#halowars {background-color: blue;
        color: white;
        border: 5px outset white;
        padding: 10px;
        margin: 50px;
        width: 400px;
        text-align: left; }

#haloreach {background-color: black;
        color: silver;
        border: 5px outset silver;
        padding: 10px;
        margin: 50px;
        width: 400px;
        text-align: left; } 

#halo1a {background-color: silver;
            color: black;
            border: 5px outset black;
            padding: 10px;
            margin: 50px;
            width: 400px;
            text-align: left; }

#halo4 {background-color: black;
        color: blue;
        border: 5px outset blue;
        padding: 10px;
        margin: 50px; 
        width: 400px;
        text-align: left; }

Answer 1

您需要为图像添加换行符，以便在新行和右侧开始。以下代码将更新此网页中的所有图像以与右侧对齐。

img {
float: right;
clear: both;
display: block;
}

#halo1 {background-color: black;
color: green; 
border: 5px outset green;
padding: 10px;
margin: 50px;
width: 600px;
text-align: left;
height: auto;
float: left; /* so it will wrap the images */
}

对于您的HTML，您可以更新到以下内容：

<p>
Several of the later titles had numerous other multiplayer maps added through different map packs. 
These extra maps are not included in the list below, but can be found by clicking the links to each title's informatino page. 
<br><img src="halo.jpg" title="Halo Logo" alt="Halo Logo" align="middle">
</p>

Dabblet demo here.

Answer 2

使用<p>标记包裹您的图片，并将其与p.yourClass{text-align: center;}对齐。

在HTML中对齐图像

2 个答案: