如何在html中居中显示图像，同时将文本置于图像的最左侧？_Html

如何在html中居中显示图像，同时将文本置于图像的最左侧？

html

如何在html中居中显示图像，同时将文本置于图像的最左侧？,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="45

这是我的密码：

<!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>


杰夫·科潘霍夫
关于我
基本信息

我喜欢打棒球
我上的是Hilliard Davidson高中
我最喜欢的音乐类型是说唱
我喜欢写电脑程序

学历

我从柏树基督教学校一直读到五年级
我在那里的时候平均成绩保持在4.0分
我在Tharp六年级学校读六年级
我在韦弗中学读7年级和8年级
我现在就读于希尔利亚德·戴维森高中

喜爱的运动队

圣路易斯红雀队（棒球）
匹兹堡钢人队（足球）
戴维森野猫队（足球和棒球）
OSU七叶树（足球和篮球）

我试图让所有三个无序列表及其标题在页面上的高度与我的图像相同，但在页面左侧。我在很多地方尝试了

，但都没有成功

您需要将文本和图像包装到一个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
检查以下位置的输出：

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>


杰夫·科潘霍夫
.floatDiv{
浮动：左；
利润率：10px；
}
关于我
基本信息

我喜欢打棒球
我上的是Hilliard Davidson高中
我最喜欢的音乐类型是说唱
我喜欢写电脑程序

学历

我从柏树基督教学校一直读到五年级
我在那里的时候平均成绩保持在4.0分
我在Tharp六年级学校读六年级
我在韦弗中学读7年级和8年级
我现在就读于希尔利亚德·戴维森高中

喜爱的运动队

圣路易斯红雀队（棒球）
匹兹堡钢人队（足球）
戴维森野猫队（足球和棒球）
OSU七叶树（足球和篮球）

您可以使用表格调整图片大小和单元格大小，就像我们在编程课上学到的那样。如果你对学校的一些编程活动感兴趣，请联系我。你应该知道我是谁

<!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>


杰夫·科潘霍夫
关于我
基本信息

我喜欢打棒球
我上的是Hilliard Davidson高中
我最喜欢的音乐类型是说唱
我喜欢写电脑程序

学历

我从柏树基督教学校一直读到五年级
我在那里的时候平均成绩保持在4.0分
我在Tharp六年级学校读六年级
我在韦弗中学读7年级和8年级
我现在就读于希尔利亚德·戴维森高中

喜爱的运动队

圣路易斯红雀队（棒球）
匹兹堡钢人队（足球）
戴维森野猫队（足球和棒球）
OSU七叶树（足球和篮球）

您的代码有什么问题。试试“请发布你的CSS”。