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

Question

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

但我无法让两张图片居中对齐并且仍然在同一条线上（请原谅我糟糕的绘画技巧）。

这是我目前所拥有的： HTML

This Week's Photo Features
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>

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

Answer 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

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

How to center align two inline images in HTML

html

css

image

center