在导航中将带有文本的图像居中答案

【问题标题】：center images with text underneath in a nav在导航中将带有文本的图像居中
【发布时间】：2014-05-27 18:40:16
【问题描述】：

我想使用图像制作导航栏，但每个图像下仍有文字，但我也希望文字居中。

我有以下 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/

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

提前致谢！

【问题讨论】：

标签： html css image alignment nav

【解决方案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/

【讨论】：

我会的！另外，您知道我将如何使图像居中吗？

【解决方案2】：

你需要将text-align: center;添加到.whatwedo li

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

JSFiddle

【讨论】：