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

㈠ HTML如何在圖片下面打出文字

圖片一個div文字一個div。或者圖片和文字在一個div里，把圖片的寬設置成100%。或者在圖片後面加<br />標簽。

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

代碼如下：

需要顯示的文字

</div>

<style>

.box{width:300px; text-align:center; font-szie:18px;}

.box img {width:100%;}

</style>

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

使用絕對定位position: absolute;讓文字覆蓋在圖片上

<style>
.h-poti{position:relative;display:block;}
.h-potiem{position:absolute;bottom:10px;left:0;width:100%;text-align:center;}
</stle>
<spanclass="h-pot">
<i><imgsrc="img/b1-img.jpg"/><em>文字</em></i>
</span>

㈣ html中怎麼讓輸入的文字顯示在圖片的下方

個人推薦你用個table，這樣控制性強一些
詳解：
<table>
<tr>
<td>
<img src="http://www..com/img/_logo.gif"/>
</td>
</tr>
<tr>
<td>
這里的文字在下方
</td>
</tr>
</table>
不懂html語言的話可以再次留言

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

㈥ html在盒子內將文字放在圖片下方

比較簡單的做法就是，將他們放置一個盒子內，你想讓文字跟圖片居中，那麼不一定要讓圖片當文字的參照物，而是讓他們在大盒子內居中，不需要太復雜的框架結構，只需要利用樣式的屬性即可，並且各個瀏覽器都會正常顯示，代碼如下：
<div class="box">
<img src="6107.jpg">
這里是居中的文字
</div>
<style>
.box{width:300px; text-align:center; font-szie:18px;}
.box img {width:100%;}
</style>

㈦ HTML中，怎麼在圖片的下面加入文字啊

使用定位來寫的，首先一個大盒子裝著圖片，

然後一個盒子裝著頭像和文字，把裝著頭像和文字

的盒子根據裝著圖片的盒子進行定位就可以了，

像這樣的其實很簡單的，要多思考和分析

代碼，要注意圖片你要自己放圖片，和修改圖片路徑

<!DOCTYPE html>

<html>

<head>

<title>圖片上放文字</title>

html,body{

margin:0;

}

.auto-img{

display: block;

width:100%;

}

.box{

width:100%;

margin-top: 50px;

}

.box-cent{

width:50%;

margin:0 auto;

position: relative;

}

.texbox{

position: absolute;

width:50%;

line-height: 80px;

background-color: #0f0;

text-align: center;

top:50%;

left:50%;

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

<div class="texbox">我是用來裝頭像和文字的盒子</div>

</div>

</body>

</html>

導航:首頁 > 文字圖片 > html讓文字在圖片的下面

html讓文字在圖片的下面

與html讓文字在圖片的下面相關的資料