2

对 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 使名称在每个图像下方排列。

感谢您的任何帮助！！

4

4 回答 4

2

我会将每个图像包装在 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>

ETC...

然后，您将定位您的 div 而不是您的图像。

希望这可以帮助。

于 2013-10-03T15:45:12.600 回答
2

放弃中心并在图像下使用 figure 和 figcaption 文本这是代码。

<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>
于 2013-10-03T15:48:37.170 回答
1

你也可以试试这个：

<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>
于 2013-10-03T15:46:56.040 回答
1

您可以使用text-align如下方式在 HTML4 或 HTML5 中执行此操作：

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

HTML4（使用 div 包装器）

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

HTML5（使用图/图标题）

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

于 2013-10-03T15:49:34.250 回答