如何在 HTML 中居中对齐两个内联图像答案

【问题标题】：How to center align two inline images in HTML如何在 HTML 中居中对齐两个内联图像
【发布时间】：2016-03-25 20:53:18
【问题描述】：

我今天的问题是，在我的 HTML 代码中，我有两个图像，但我找不到将它们都居中的方法。它应该看起来像这样

但我无法让这两个图像在中心对齐并且仍然在同一条线上（请原谅我的绘画技巧不佳）。

这是我目前所拥有的： HTML

本周的照片特色

Lorem ipsum dolor sit amet, novum alienum percipit eum ne。 Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata。 Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex。 Sea doming comprehensam ad, vim te aeque melius。

Lorem ipsum dolor sit amet, novum alienum percipit eum ne。 Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata。 Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex。 Sea doming comprehensam ad, vim te aeque melius。

    <h1 align="center">Last Week's Photo Features</h1>
    <img src="CaliforniaKelp.jpg"  />
    <img src="RockyMountains.jpg" />
    <p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>
    <p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>
<body>

CSS：

    h1:before   {content: url("NikonD100_40x30.jpg")}
    h1:after   {content: url("NikonD100_40x30.jpg")}
    p:nth-of-type(1)::first-letter {font-size:44px;font-weight: bold; color: red; float:left; line-height: 35px; padding-top: 3px; padding-right:3px;}
    p:nth-of-type(1)::first-line {font-weight: bold;}
    p:nth-of-type(2)::first-letter {font-size:44px;font-weight: bold; float:left; line-height: 35px; padding-top: 3px; padding-right:3px;color:black;}
    p:nth-of-type(2)::first-line {font-weight: bold;color:red;}
     p:nth-of-type(3)::first-letter {font-size:44px;font-weight: bold; color: red; float:left; line-height: 35px; padding-top: 3px; padding-right:3px;}
    p:nth-of-type(3)::first-line {font-weight: bold;}
    p:nth-of-type(4)::first-letter {font-size:44px;font-weight: bold; float:left; line-height: 35px; padding-top: 3px; padding-right:3px;color:black;}
    p:nth-of-type(4)::first-line {font-weight: bold;color:red;}
</style>

【问题讨论】：

你能不能用一个 div 包裹这两个图像，然后用 margin-left:auto 将该 div 居中；边距右：自动

标签： html css image center

【解决方案1】：

<h1 align="center">Last Week's Photo Features</h1>
<div style="text-align:center;">
<img src="CaliforniaKelp.jpg" style="display:inline-block;"  />
<img src="RockyMountains.jpg" style="display:inline-block;" />
</div>
<p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>
<p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>

正如@dboals 提到的那样；

<h1 align="center">Last Week's Photo Features</h1>
<div style="text-align:center;">
<img src="CaliforniaKelp.jpg" style="display:inline-block;"  />
<img src="RockyMountains.jpg" style="display:inline-block;" />
</div>
<p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>
<p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>

【讨论】：

【解决方案2】：

试试这个：

<h1 align="center">Last Week's Photo Features</h1>
<div style="text-align:center;">
<img src="CaliforniaKelp.jpg" style="display:inline-block;"  />
<img src="RockyMountains.jpg" style="display:inline-block;" />
</div>
<p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>
<p>Lorem ipsum dolor sit amet, novum alienum percipit eum ne. Vel ne paulo inermis, natum numquam vix ei, ex pri dicit blandit vituperata. Ne vel porro clita, aperiam consetetur referrentur mea et, per falli ornatus adolescens ex. Sea doming comprehensam ad, vim te aeque melius.</p>

DEMO HERE

【讨论】：