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

html讓文字在圖片的下面

發布時間:2023-09-26 14:10:08

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

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

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

代碼如下:

<div class="box">

<img src="6107.jpg">

需要顯示的文字

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

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.d1{

width: 400px;

height: 250px;

background-color: red;

text-align: center;

}

</style>

</head>

<body>

<div>

<img width="200px" height="150px" src="dddd.png" />

<br/>

你啥時候嫁給我,hahahahaahahahahahaah

</div>

</body>

</html>

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

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

文字位於正右邊的方法:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.d1{

width: 400px;

height: 250px;

background-color: red;

}

.d2{

vertical-align: middle;

}

</style>

</head>

<body>

<div>

<img width="200px" height="150px" src="dddd.png" />

你啥時候嫁給我

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

<meta charset="utf-8"/>

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

<style type="text/css">

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="box">

<div class="box-cent">

<img class="auto-img" src="images/000.jpg"/>

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

</div>

</div>

</body>

</html>

閱讀全文

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

熱點內容
新中式門頭圖片大全 瀏覽:124
美女被扇臉圖片 瀏覽:922
絲襪如何搭配圖片大全 瀏覽:690
模特短發圖片大全 瀏覽:397
鹿晗2016發型圖片 瀏覽:393
word中圖片怎麼從橫的變為豎的 瀏覽:171
國畫簡單蝴蝶圖片 瀏覽:116
寶貝發型圖片 瀏覽:9
劉海漫畫圖片女生 瀏覽:99
圖片合成抖音視頻如何轉發朋友圈 瀏覽:632
十六的文字圖片 瀏覽:81
粉色花高清圖片唯美 瀏覽:801
ppt圖片文字怎麼做 瀏覽:198
好運來美麗圖片大全 瀏覽:724
3歲女寶學生頭發型圖片 瀏覽:579
有你在的地方可愛圖片 瀏覽:341
十萬個草泥媽文字圖片 瀏覽:836
lr如何掃描圖片的色調 瀏覽:876
如何把商標放到圖片上 瀏覽:408
女生上學時漫畫圖片 瀏覽:212