如何在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"/>，但没有奏效。
答
您需要将文本和图像包装到一个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>
很明显，您可以使用类而不是内联样式。
答
检查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>
答
您可以使用表格和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>
你的代码有什么问题。试试'
–
Sam1604
2014-09-20 11:18:41
请发布您的CSS。 – Siyah 2014-09-20 11:20:32