Javascript 如何正确对齐此文本？

有关视觉参考，请单击此图像：

我试图让图片中显示的文本与其相应的图片紧挨着，它们都是“h2”元素。img和h2元素都存储在未排序的列表中。html大致如下所示，带有一些基本的大小调整CSS：

#container{
    margin:auto;
    width:70%;
    height: 100%;
    border: 3px solid green;
    padding:10px;
}
img{
    height: 40%;
    width: 40%;
}
h1{
    text-align: center;
}
h2{
    text-align: right;
}


<nav>
  <div id ="container">
    <ul id = "list">
         img1
         title1
         img2
         title2
    </ul>
 </div>

#容器{
保证金：自动；
宽度：70%；
身高：100%；
边框：3倍纯绿；
填充：10px；
}
img{
身高：40%；
宽度：40%；
}
h1{
文本对齐：居中；
}
氢{
文本对齐：右对齐；
}

img1
标题1
img2
标题2

---

重申一下，我怎样才能把标题放在图片的旁边。此外，是否可以使用不同颜色的背景来区分列表中的两个独立图像，并在浅灰色和蓝色之间交替使用？

您可以这样做：

<nav>
  <div id ="container">
    <ul id = "list">
         <li><img src="https://timedotcom.files.wordpress.com/2015/01/trump.jpg"/></li>
         <li><h2>title1</h2></li>
         <li><img src="https://timedotcom.files.wordpress.com/2015/01/trump.jpg"/></li>
         <li><h2>title2</h2></li>
    </ul>
 </div>

img{
    height: 40%;
    width: 40%;
}

h1{
    text-align: center;
}
h2{
    text-align: right;
    margin:0px;
}
#list{
     list-style:none;
}
li{
    width:48%;
    display:inline-block;
}

标题1

标题2

img{
身高：40%；
宽度：40%；
}
h1{
文本对齐：居中；
}
氢{
文本对齐：右对齐；
边际：0px；
}
#名单{
列表样式：无；
}
李{
宽度：48%；
显示：内联块；
}

小提琴：

尽管我建议使用表或浮动div，而不是ul

---

此外，一个页面上应该只有一个h2标记，使用h3代替。希望有帮助：）

使用HTML标签，这样图像和文本将始终配对在一起。比如说,

“id=“picture1”align=“left”/>
“id=“picture2”align=“left”/>

您是否也可以添加css代码？将HTML中的文本放在相应图像之前，并将文本设置为

float:right