html - 在导航下方居中带有文本的图像

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/

我正在寻找的总体结果是图像居中，文本位于其图像下方，也居中。

提前致谢!

Answer 1

您应该将 text-align:center 属性添加到您的 li 并将 float:left 替换为 display:inline-block

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

请参阅此处示例:http://jsfiddle.net/B7sdp/1/