在图像下方排列文字

Question

我想要选项按钮，在图像下方放置图像和文字。现在我已经设法拥有图像，但不知道如何在不干扰对齐的情况下将文本正好排列在图像下方。

{{1}}

这是Fiddle。

我正在寻找类似下面的输出

还希望动态生成行和列中的选项按钮。有关如何实现它的任何想法？

Answer 1

只需设置为display：block;

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

你可以写成

<label>
      <input type="radio" name="fb" value="big1" />
       <img src="http://placehold.it/40x60/35d/fff&text=f">
       <span>your text</span>
    </label>

Answer 2

只需将此css添加到页面：

<Style>
label{
  float:left;
  height:100px;/*can be modified*/
 padding:10px;/*can be modified*/
width:50px;

}
</Style>

并在每张图片后添加
，然后输入以下名称：

<img src="http://placehold.it/20x20/35d/fff&text=f"><br/>
 My name

要控制每行图像数量，有两种方法。

1 - 为clear添加div：

<div style='clear:both;'></div>

2-在div中添加所有内容并调整此div的宽度，直到达到正确的图像数量。

将此添加到您拥有的主要广告

<div id="maincontainer" style="width:100px">

我通过添加宽度更新了css：50px，这意味着每个标签将是50px ...主容器是100 =＆gt; 2项/行。

使主容器的宽度为150 - > 3项/行....

Answer 3

根据您的需要，您可以使用<br/>标记或不使用标签获得所需的输出。

使用＆lt; br /＆gt;代码

fiddle

没有＆lt; br /＆gt;代码

fiddle

在小提琴1中，我使用了＆lt; br /＆gt;我在标签上使用了display:block;，在标签上使用了display:inline-block。因此，请使用您可以使用的任何内容：）

Answer 4

您可以将图片包装在<figure>标记内，并使用<figcaption>在其下方显示文字。我不确定你对＆＃34;选项按钮＆＃34;的含义。虽然。

http://codepen.io/partypete25/pen/KzJOyY

<figure>
  <img src="image-src-url" alt="">
  <figcaption>Dog</figcaption>
</figure>

Answer 5

用这个改变你的CSS：

label > input + img {
      /* IMAGE STYLES */
      cursor: pointer;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      border-radius: 50%;
      width: 50px;
      height: 50px;
       margin: 5px;
      border: 1px solid #ccc;
      float: left;
    }

Demo