将文本与图标中心对齐

Question

我想将图标下的文字与图标图像对齐

这里是小提琴链接：

http://jsfiddle.net/J2N2P/

<div id="middle">
    <div class="icon_middle"><img src="images/smart_tv.jpg" align="middle" vspace="5"><span>Smart TV</span></div>
    <div class="icon_middle"><img src="images/tablet.jpg" align="middle" vspace="5"><span>Tablet</span></div>
    <div class="icon_middle"><img src="images/iphone.jpg" align="middle" vspace="5"><span>Iphone</span></div>
    <div class="icon_middle"><img src="images/android.jpg" align="middle" vspace="5"><span>Android</span></div>
    <div class="icon_middle"><img src="images/pc.jpg" align="middle" vspace="5"><span>Pc</span></div>
    <div class="icon_middle"><img src="images/mac.jpg" align="middle" vspace="5"><span>Mac</span></div>
    <div id="middle_txt">

Answer 1

将此更改为您的CSS，您将在中心对齐imgs和文本：

<强> CSS

.icon_middle span {
   display:block;
   margin: 0 auto;
   text-align:center;
}

.icon_middle img {
    padding: 0 10px;
    display: block;
    margin: auto;
}

Answer 2

您必须将对img / span放在某个容器（span或div）中，然后将它们相对于该容器对齐。或者，如果布局被认为更像表格，只需使用table / tr / td并在td内对齐img / span对。