如何把文字（跨度）下面的图像与CSS

我想学习CSS和HTML，并有一个非常基本的问题在这里。我怎样写我的CSS，以便它显示的图像下方的跨度文本如何把文字（跨度）下面的图像与CSS

<div class="section"> 
    <ul> 
     <li id="lumia820" class="figures" > 
      <img src="f-lumia820.jpg" alt="" class="figure"/> 
      <span class="figcaption">Lumia 820</span> 
     </li> 
     <li id="iphone4s" class="figures"> 
      <img src="f-iphone4s.jpg" alt="" class="figure"/> 
      <span class="figcaption">Iphone 4s</span> 
     </li> 
    </ul> 
</div>

目前，我有一些像

.section ul { 
    margin: 0 auto; 
    float: left; 
} 

.figures { 
    display: inline; 
} 

.figures span { 
    font-size: 20px; 
    font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif; 
    letter-spacing: 0.1em; 
} 

.figures img{ 
    vertical-align: top; 
    width: 30%; 
    height: 30%; 
    margin: 1% 1%; 
}

来源

2013-10-10 LivingThing

PLZ你可以检查更新的一个 –

只需设置到display: block;让每个人占用公司自己的路线。现在，它们被设置为display: inline，因为这是<img>标签和<span>标签的默认值。

.figures span, .figures img { 
    display: block; 
}

来源

2013-10-10 15:48:07 Ktash

2秒打我给它：d – AbstractChaos

'.figures> *'更短。 –

它的作品，但它打破了别的东西。我的意思是现在的文字显示在图像下方。但每件事都在一列中。而我想要两列，每一个[图像，文本]类别的文本将低于图像。 – LivingThing

应该能够做到

.figcaption { 
    display:block; 
}

fiddle

来源

2013-10-10 15:48:09 AbstractChaos

这应该做的伎俩：

.figures span{ display: block; }

来源

2013-10-10 15:48:35

入住此演示：http://jsfiddle.net/h6McP/1/

跨度和图像实际上是一个内联元素，所以它西港岛线由线我们需要阻止元素，使跨度会exat下面

这里的形象我给

.figures span {display:block}

来行

li.figures { display: inline-block;}

检查，这是一个更新

来源

2013-10-10 16:00:43

你没有链接 – LivingThing

对不起，我现在加入它 –

它的作品，但它打破别的东西。我的意思是现在文字显示在图像下方。但每件事都在一列中。而我想要两列，每一个[图像，文本]类别的文本将低于图像 – LivingThing

如何把文字（跨度）下面的图像与CSS

回答

相关问题