Question

我今天的问题是，在我的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>

Answer 1

＆＃13;

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

＆＃13;

正如@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

试试这个：

[.. | .country? // empty] | unique

DEMO HERE

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

2 个答案: