如何在html中居中放置圖像，同時將文本置於左側？

這裏是我的代碼：如何在html中居中放置圖像，同時將文本置於左側？

<!DOCTYPE html> 
<html> 
<head><title>Jeff Koppenhoefer</title></head> 
<body background="bg.jpg"> 
<h1 align=center>About me</h1> 
<center><img src="barons.jpg" height="300" width="450" vspace="20"/></center> 
<h3>Basic Info</h3> 
<ul type="circle"> 
    <li>I love to play baseball</li> 
    <li>I go to Hilliard Davidson High School</li> 
    <li>My favorite type of music is rap</li> 
    <li>I love writing computer programs</li> 
</ul> 
<h3>Educational Background</h3> 
<ul type="circle"> 
    <li>I attended Cypress Christian School through 5th grade</li> 
    <li>I maintained a 4.0 GPA while I was there</li> 
    <li>I attended Tharp 6th Grade School for 6th grade</li> 
    <li>I attended Weaver Middle School for 7th and 8th grade</li> 
    <li>I now attend Hilliard Davidson High School</li> 
</ul> 
<h3>Favorite Sports Teams</h3> 
<ul type="circle"> 
    <li>St. Louis Cardinals (Baseball)</li> 
    <li>Pittsburgh Steelers (Football)</li> 
    <li>Davidson Wildcats (Football and Baseball)</li> 
    <li>OSU Buckeyes (Football and Basketball)</li> 
</ul> 
</body> 
</html>

我想有三個無序列表和它們的頭是在頁面作爲我的圖像上相同的高度，但它的左側。我在很多地方試過<br clear="left"/>，但沒有奏效。

來源

2014-09-20 Jeff

你的代碼有什麼問題。試試' – Sam1604 2014-09-20 11:18:41

請發佈您的CSS。 – Siyah 2014-09-20 11:20:32

您需要將文本和圖像包裝到一個div中，然後您可以居中。例如。

<div style="margin:0 auto; width:500px"> 
      <img src="xxx" style="float:right; width:200px;" /> 
      <div style="width:300px float:left;"> 
      Insert text here... 
      </div> 
    </div>

很明顯，您可以使用類而不是內聯樣式。

來源

2014-09-20 11:27:41

檢查jsbin在這裏http://jsbin.com/zatetu/1/edit
檢查輸出在http://jsbin.com/zatetu/1

HTML代碼

<!DOCTYPE html> 
<html> 
<head><title>Jeff Koppenhoefer</title></head> 
<body background="bg.jpg"> 
    <style type="text/css"> 
    .floatDiv{ 
    float:left; 
    margin:10px; 
    } 
    </style> 
<h1 align=center>About me</h1> 
    <div class="floatDiv"> 
    <img src="barons.jpg" height="300" width="450" vspace="20"/> 
    </div> 
    <div class="floatDiv"> 
    <h3>Basic Info</h3> 
    <ul type="circle"> 
     <li>I love to play baseball</li> 
     <li>I go to Hilliard Davidson High School</li> 
     <li>My favorite type of music is rap</li> 
     <li>I love writing computer programs</li> 
    </ul> 
    </div> 
    <div class="floatDiv"> 
    <h3>Educational Background</h3> 
    <ul type="circle"> 
     <li>I attended Cypress Christian School through 5th grade</li> 
     <li>I maintained a 4.0 GPA while I was there</li> 
     <li>I attended Tharp 6th Grade School for 6th grade</li> 
     <li>I attended Weaver Middle School for 7th and 8th grade</li> 
     <li>I now attend Hilliard Davidson High School</li> 
    </ul> 
    </div> 

    <div class="floatDiv"> 
    <h3>Favorite Sports Teams</h3> 
    <ul type="circle"> 
     <li>St. Louis Cardinals (Baseball)</li> 
     <li>Pittsburgh Steelers (Football)</li> 
     <li>Davidson Wildcats (Football and Baseball)</li> 
     <li>OSU Buckeyes (Football and Basketball)</li> 
    </ul> 
    </div> 

</body> 
</html>

來源

2014-09-20 11:36:01

您可以使用表格和sizelike我們在編程課學到調整圖片的大小和電池。如果你對學校的一些編程活動感興趣，請打我。你應該知道我是誰。

<!DOCTYPE html> 
<html> 
<head><title>Jeff Koppenhoefer</title></head> 
<body background="bg.jpg"> 
<h1 align=center>About me</h1> 
<table> 
    <tr> 
     <td><h3>Basic Info</h3> 
     <ul type="circle"> 
      <li>I love to play baseball</li> 
      <li>I go to Hilliard Davidson High School</li> 
      <li>My favorite type of music is rap</li> 
      <li>I love writing computer programs</li> 
     </ul> 
     </td> 
     <td><img src="barons.jpg"/></td> 
</table> 
<h3>Educational Background</h3> 
<ul type="circle"> 
    <li>I attended Cypress Christian School through 5th grade</li> 
    <li>I maintained a 4.0 GPA while I was there</li> 
    <li>I attended Tharp 6th Grade School for 6th grade</li> 
    <li>I attended Weaver Middle School for 7th and 8th grade</li> 
    <li>I now attend Hilliard Davidson High School</li> 
</ul> 
<h3>Favorite Sports Teams</h3> 
<ul type="circle"> 
    <li>St. Louis Cardinals (Baseball)</li> 
    <li>Pittsburgh Steelers (Football)</li> 
    <li>Davidson Wildcats (Football and Baseball)</li> 
    <li>OSU Buckeyes (Football and Basketball)</li> 
</ul> 
</body> 
</html>

來源

2014-09-29 21:08:50 Clash

如何在html中居中放置圖像，同時將文本置於左側？

回答

相關問題