Question

HTML和CSS非常新，但阅读很多并希望学习。

我有一个水平排的5个人的图像，我想将图像的名称放在正下方，位于每个图像的下方。

这是我写的HTML：

    <div id="members_hz">
            <center>
            <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy">

            <img src ="images/steve.jpg" height="150px" width="150px" alt="steve">

            <img src ="images/todd.jpg" height="150px" width="150px" alt="todd">

            <img src ="images/don.jpg" height="150px" width="150px" alt="don">

            <img src ="images/sean.jpg" height="150px" width="150px" alt="sean">
            <p>Kaths</p>
            <p>Steve</p>
            <p>Todd</p>
            <p>Don</p>
            <p>Sean</p>
            </center>
        </div>

这是CSS：

#members_hz {
    overflow:hidden;
}

#members_hz img {
    position:relative;
    left:30px;
    display:inline;
    margin: 0 15px;
}

图像在整个页面上很好地排列，但我无法弄清楚CSS是否使每个图像下方的名称都排成一行。

感谢您的帮助!!

Answer 1

我会将每个图像包装在div或span中，并包含如下名称

<div id="img1">
   <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy">
   <p>Kaths</p>
</div>

<div id=img2">
   <img src ="images/steve.jpg" height="150px" width="150px" alt="steve">
   <p>Steve</p>
</div>

等等...

然后你会定位你的div而不是你的图像。

希望这有帮助。

Answer 2

抛弃中心并使用图形和图形来显示图像下面的文字是代码。

<div id="members_hz">
<figure>
    <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy">
    <figcaption>Kaths</figcaption>
</figure>
<figure>
    <img src ="images/steve.jpg" height="150px" width="150px" alt="steve">
    <figcaption>Steve</figcaption>
</figure>
<figure>
    <img src ="images/todd.jpg" height="150px" width="150px" alt="todd">
    <figcaption>Todd</figcaption>
</figure>
<figure>
    <img src ="images/don.jpg" height="150px" width="150px" alt="don">
    <figcaption>Don</figcaption>
</figure>
<figure>
    <img src ="images/sean.jpg" height="150px" width="150px" alt="sean">
    <figcaption>Sean</figcaption>
</figure>
</div>

Answer 3

你也可以试试这个：

<style>
#test{list-style:none} // you can set heigt width margin padding also.
#test > li
{
height:120px;width:100px;padding:5px; border:solid 1px #ccc;
text-align:center;float:left;margin:2px;
}
#test >li>img {//your css for image}
</style>

<ul id="test">
<li ><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
<li><img src="../images/img1.png"/><br>Name of Image1</li>
</ul>

Answer 4

您可以使用text-align这样在HTML4或HTML5中执行此操作：

.img-wrapper {
    text-align:center;
}

HTML4（使用div包装器）

http://jsfiddle.net/2xGZ5/3/

HTML5（使用figure / figcaption）

http://jsfiddle.net/2xGZ5/2/

将文本直接放在多个图像下方

4 个答案: