在导航栏中心显示图片并在下方添加文本

Question

我希望使用图片制作导航栏，但还想在每张图片下方显示文字，并使该文字居中。

我有以下HTML代码：

<div class="whatwedo-wrapper" id="whatwedo">
                    <div class="whatwedo">
                        <ul>
                            <li>
                                <img class="services" src="images/Brand-Online-Circle-Blue.png" width="200px"
                                onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
                                onmouseout="this.src='images/Brand-Online-Circle-Blue.png'">
                                <br>
                                Brand Online
                            </li>
                            <li>

                                <img class="services" src="images/Brand-Marketing-Circle-Blue.png" width="200px"
                                onmouseover="this.src='images/Brand-Marketing-Circle-Grey.png'"
                                onmouseout="this.src='images/Brand-Marketing-Circle-Blue.png'">
                                <br>
                                Brand Management

                            </li>
                        </ul>
                    </div>
                </div>

我在这里创建了一个jsfiddle-http://jsfiddle.net/B7sdp/

我希望所有的图片都居中显示，文本也要在其相应的图片下面居中显示。

谢谢！

- JoshuaBrand

Answer 1

你应该在 li 元素中添加 text-align:center 属性，并将 float:left 替换为 display:inline-block

.whatwedo li {
width: 200px;
    display:inline-block;
list-style: none;
    text-align:center;
}

请查看此示例：http://jsfiddle.net/B7sdp/1/

- potashin

---

我会做！另外，你知道如何将图片居中吗？ - JoshuaBrand

Answer 2

你需要在 .whatwedo li 中添加 text-align: center;

.whatwedo li {
width: 200px;
margin: 0 auto;
float: left;
    text-align: center;
list-style: none;
}

JSFiddle

程序设计相关

- imtheman