在HTML中對齊圖像

我正在爲我的HTML類工作一個網站，並且遇到了一個小問題。我使用標籤將我的頁面分成幾個部分，每個部分都有不同的類別。如果可能的話，我希望在列表右側創建包含的圖像。在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; }

來源

2014-03-27 Beth Tanner

您需要爲您的圖像在換行和右側開始換行。以下代碼將更新此網頁中的所有圖像以對齊到右側。

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.

來源

2014-03-27 03:29:22 Rachelle

謝謝，但這仍然不是真的給我我想象的東西。看，最後一頁每個暈環標題都會有一個盒子，每個盒子都會有一個該遊戲的多人地圖列表。我有每個遊戲案例的圖像，我想包含在每個遊戲的框中。 –

你有圖嗎？我並不擅長可視化你需要的東西:( – Rachelle

不幸的是，我沒有，我也注意到，在原來的帖子中，我說我想要的圖像左側的列表，但我的意思是右邊。 –

與<p>標記放在你的形象，並與p.yourClass{text-align: center;}對齊。

來源

2014-03-27 03:45:01

在HTML中對齊圖像

回答

相關問題