对齐文本图标的中心

本文介绍了对齐文本图标的中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想调整下的图标，图标的图像文本

这里是小提琴链接：

 ＆LT; DIV ID =中间＆GT;
    ＆LT; DIV CLASS =icon_middle＆GT;＆LT; IMG SRC =图像/ smart_tv.jpgALIGN =中间VSPACE =5＆GT;＆LT;跨度＆GT;智能电视＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =icon_middle＆GT;＆LT; IMG SRC =图像/ tablet.jpgALIGN =中间VSPACE =5＆GT;＆LT;跨度＆GT;平板电脑＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =icon_middle＆GT;＆LT; IMG SRC =图像/ iphone.jpgALIGN =中间VSPACE =5＆GT;＆LT;跨度＆GT; iPhone＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =icon_middle＆GT;＆LT; IMG SRC =图像/ android.jpgALIGN =中间VSPACE =5＆GT;＆LT;跨度＆GT;的Android＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =icon_middle＆GT;＆LT; IMG SRC =图像/ pc.jpgALIGN =中间VSPACE =5＆GT;＆LT;跨度个PC＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =icon_middle＆GT;＆LT; IMG SRC =图像/ mac.jpgALIGN =中间VSPACE =5＆GT;＆LT;跨度＆GT;苹果＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
    ＆LT; DIV ID =middle_txt＆GT;

解决方案

更改为你的CSS，你会得到的中心对齐IMGS和文字：

CSS

  .icon_middle跨度{
   显示：块;
   保证金：0汽车;
   文本对齐：中心;
}

.icon_middle IMG {
    填充：0 10px的;
    显示：块;
    保证金：汽车;
}

i want to align the text under the icons to the icons image

here is the fiddle link:

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">

解决方案

change this to your CSS, You'll get align imgs and text in the center:

CSS

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

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

这篇关于对齐文本图标的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！