css文字在圖片下方_html css怎麼樣才能把文字放在圖片的正下方

『壹』 html css怎麼樣才能把文字放在圖片的正下方

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.d1{

width: 400px;

height: 250px;

background-color: red;

text-align: center;

}

</style>

</head>

<body>

<div>

<br/>

你啥時候嫁給我,hahahahaahahahahahaah

</div>

</body>

</html>

————————————————

這樣就會能夠將文字放在圖片的正下方，得到以下圖片：

文字位於正右邊的方法：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.d1{

width: 400px;

height: 250px;

background-color: red;

}

.d2{

vertical-align: middle;

}

</style>

</head>

<body>

<div>

你啥時候嫁給我

</div>

</body>

</html>

『貳』 CSS樣式：如何使文字顯示在圖片下方

圖片默認為內聯元素，可以設置圖片為塊級元素，然後直接寫文字就可以在圖片下方了。

舉例：

img{display:block;}

HTML代碼：

<imgsrc="圖片路徑"/>這里是測試文字，可以在圖片下方。

『叄』 css<strong>里文字固定在圖片下面

看完你的代碼我建議啊，你li裡面只包含一個<a>標簽，即<a>包含圖片和底下的文字，因為都是一個連接，然後img在css裡面這么寫

img {
display:block;

width:你定義

height:你定義

margin:5px auto; //即圖片離頂部5px,然後水平居中

}
接著你的strong外面有個p標簽，就不用span標簽了,p在css裡面這么寫
p{
width:100%;

text-align:center;

}
我大概寫了一下，樓主看的懂的話自己完善一下，就沒問題了，還有樓主要做的網頁容有點給力

『肆』 CSS怎樣控制，讓文字在圖片下方顯示

圖片默認為內聯元素，可以設置圖片為塊級元素，然後直接寫文字就可以在圖片下方了。

『伍』如何用CSS，將文字隱藏在圖片之下，然後將滑鼠移到圖片上就會浮現出來，下面是圖片顯示的案例，在線等

<style>
.box{position:relative;float:left;width:240px;height:160px;margin:10px}
.box.img{width:100%;height:100%;background-color:#fdd}
.box.txt{display:none;position:absolute;top:160px;width:320px;height:200px;background-color:#ddf;z-index:2}
.box:hover.txt{display:block}
</style>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>
<divclass="box">
<divclass="img">這里放圖片</div>
<divclass="txt">這里放文字</div>
</div>

『陸』用css實現圖標在上，文字在下

很多種實現方式.
1.
設置兩個div層(也可以是table)
上層div
放圖片.
下層放文字.
2.
嵌套div.
外層背景圖片.
內層文字(
span
也可以)
3.
一層div,
設置背景圖片.
文字寫在div里.
但是對<a>標簽進行
line-height
值設置高些.
就能讓文字位於水平線下方了.

『柒』如何編寫CSS將文字顯示在圖片下方

1、比如我在div裡面書寫了一些文字，然後想要在放入一張圖片，這時候小夥伴可能會直接想到img標簽，其實這個想法是錯誤的。

『捌』 CSS讓一行文字顯示在全局圖片的底部。。

直接上代碼：
<td align="center">
<div style="position:relative;height:450px;width:300px;">
<a href="#" target="_blank"><img src="圖片1.jpg" style="border:0;height:450px;width:300px;float:none;margin:0px;"/></a>
<div style="opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);position:absolute;width:300px;height:50px;line-height:50px;z-indent:2;left:0;bottom:4;background:#000;color:#FFF;">
文字
</div>
</div>
</td>
<td align="center">
<div style="position:relative;height:450px;width:300px;">
<a href="#" target="_blank"><img src="圖片2.jpg" style="border:0;height:450px;width:300px;float:none;margin:0px;"/></a>
<div style="opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);position:absolute;width:300px;height:50px;line-height:50px;z-indent:2;left:0;bottom:4;background:#000;color:#FFF;">
文字
</div>
</div>
</td>

要是想修改文字和底部的距離修改bottom的值就行了。

辛苦碼字，如果問題解決了，別忘了給分哦。

『玖』 css頁面布局如何使文字在圖片下方居中顯示

摘要您好，您的問題我已經看到了，我來為您解答。請稍等幾分鍾奧～

導航:首頁 > 文字圖片 > css文字在圖片下方

css文字在圖片下方

與css文字在圖片下方相關的資料