CSS样式:如何使文字显示在图片下方?

发布网友 发布时间：2022-04-06 12:55

我来回答

共6个回答

热心网友 时间：2022-04-06 14:24

1、打开Dreamweaver创建css页面。

2、输入以下代码，如图。

3、切换至设计模式添加图片为背景，输入文字看最终效果，如图。

热心网友 时间：2022-04-06 15:42

图片默认为内联元素，可以设置图片为块级元素，然后直接写文字就可以在图片下方了。

举例：

img{ display:block; }

HTML代码：

<img src="图片路径" />这里是测试文字，可以在图片下方。

热心网友 时间：2022-04-06 17:17

@foreach (var item in Model)
{ <div style=" display:inline; list-style:list-style-image"><a href="@Url.Action("Details", new { id = item.BId })">
<dl>
<dt><img alt="@item.BName" src="@item.BookArtUrl" width="180" height="200" title="@idtem.BName"/></dt>
<dd> @item.BName</dd>
</dl>
</a></div> }
你在css文件里面添加dl、dt、dd控制代码即可追问照您的改了之后是竖排显示的，我想要的是横排显示

追答你应该是没有在css代码里面给dl设置float:left;及width，width根据你的图片宽度设置

热心网友 时间：2022-04-06 19:08

img或者span加上style="display: block"
div里面添加一个浮动的样式float: left
{ <div style="float: left; display:inline; list-style:list-style-image"><a href="@Url.Action("Details", new { id = item.BId })">
<img alt="@item.BName" src="@item.BookArtUrl" width="180" height="200" title="@item.BName"/>
<span style="display: block;"> @item.BName</span>
</a></div> }

热心网友 时间：2022-04-06 21:16

给图片设置一个CSS属性：display:block; 就可以了

热心网友 时间：2022-04-06 23:41

这种情况 放到表格中最方便了 图片跟文字对应 放到两行中