Question

我希望这四张图片能够在我的屏幕中间居中，同时仍然保持原样。

<h2><img src="images/Colorado Parks.gif" alt="Button to Colorado Parks webpage" id="colParks"/></h2>
<h2><img src="images/Colorado Monuments.gif" alt="Button to Colorado Monuments webpage" usemap="#goToColMons" id="colMonuments"/></h2>
<h2><img src="images/Spotlight Park.gif" alt="Button to Spotlight Park webpage" id="spotPark"/></h2>
<h2><img src="images/Places to Stay.gif" alt="Button to places to Stay webpage" id="toStay"/></h2>

#colMonuments, #spotPark, #toStay, #colParks {
    float:left;
    margin: 8px;
}

Answer 1

看起来display:inline-block是最好的。

DEMO： http://jsfiddle.net/nn82mzjj/

.class-name {
    text-align: center;
    font-size: 0;
}
.class-name h2 {
    margin: 0 8px;
    display: inline-block;
    font-size: 16px; /*adjustable*/
}

Answer 2

您可以尝试这样的事情：

JSFiddle Example

首先，我们向所有图像添加容器（在我们的示例中是带有id images-container的div），之后我们将此容器设置为放置在页面的中心。在此容器中，我们将h2元素设置为inline-block元素，之后我们可以在包含元素（在我们的示例中为div，id为images-container）text-align:center中设置{{1}与图像。

HTML：

h2

CSS：

<div id="images-container">

<h2><img src="images/Colorado Parks.gif" alt="Button to Colorado Parks webpage" id="colParks"/></h2>
<h2><img src="images/Colorado Monuments.gif" alt="Button to Colorado Monuments webpage" usemap="#goToColMons" id="colMonuments"/></h2>
<h2><img src="images/Spotlight Park.gif" alt="Button to Spotlight Park webpage" id="spotPark"/></h2>
<h2><img src="images/Places to Stay.gif" alt="Button to places to Stay webpage" id="toStay"/></h2>

</div>

如何将这些图像置于中间位置（HTML和CSS）？

2 个答案: