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/

Answer 2

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

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

<强> JSFiddle

导航中心下方带有文字的图像

2 个答案: