Html 在导航中将图像居中，并在下方显示文本

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

我有下面的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-

我期待的总体结果是图像居中，文本位于图像下方，也居中

---

提前谢谢

您需要添加

文本对齐：居中到
。李在干什么

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

您应该将
文本对齐：居中
属性添加到
li
中，并将
浮动：左
替换为
显示：内联块

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

参见此处示例：
我会的！另外，你知道我将如何将图像居中吗？