導航:首頁 > 文字圖片 > div圖片文字居中
div圖片文字居中
發布時間：2023-01-13 11:25:451. div里圖片與文字水平居中對齊
通過css樣式<style type="text/css" id="internalStyle">
#container{
text-align: center;
width: 640px;
padding: 20px 0 20px 0;
border: 1px solid #339;
background: #EEE;
white-space: nowrap;
}
img, p{
display: inline;
vertical-align: middle;
font: bold 12px "宋體", serif;
color: #666;
}
</style>
<div id="container">
<img src=" http://community.csdn.net/images/CSDN_logo.GIF" alt="aaa">
<p>文字層</p>
<p>Text Layer</p>
<img src=" http://community.csdn.net/images/CSDN_logo.GIF" alt="aaa">
</div>
2. css html 如何讓div里邊的圖片和文字同時上下居中
方法步驟如下：
1、首先打開計算機，使用瀏覽器打開a.html，可以看到默認情況，是圖片置頂對齊，文字置底對齊，所以通常圖片高，文字低，不能水平居中對齊。
3. 如何設置div裡面的字居中顯示
先說文字居中。
此處是垂直居中，關鍵代碼height:105px;line-height:105px;兩個值要相等。
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;' >居中</div>
文字橫向居中，關鍵代碼text-align:center
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'>ju zhong</div>
圖片居中,代碼如下。
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'><img src="1.png" alt="" /></div>
效果如圖；
可是垂直沒居中。
圖片垂直居中，關節代碼display: table-cell; vertical-align:middle;
代碼如下；
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center ; display: table-cell; vertical-align:middle; '><img src="1.png" alt="" /></div>
4. DIV圖片和文字怎麼居中對齊
兄弟，我給你寫了個示例，把下面代碼復制過去看看吧：
DIV中怎樣讓文字跟圖片居中對齊的鍵在於這個屬性 vertical-align:middle;
------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標題頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-size:12px; }
.clearfix:after { content:'\0020'; display:block; height:0; clear:both; }
.clearfix { *zoom:1;
}
.test { height:100px; width:200px; line-height:100px; border:solid 1px #000; margin:100px auto; padding:0 30px; }
.test img{border:solid 1px #000; vertical-align:middle;}
</style>
</head>
<body>
<div class="test">
這個對齊了<img src="http://img..com/img/logo-.gif" />
</div>
</body>
</html>
打字不易，如滿意，望採納。
5. 在一個DIV中怎樣讓文字跟圖片居中對齊
兄弟，我給你寫了個示例，把下面代碼復制過去看看吧：
DIV中怎樣讓文字跟圖片居中對齊的鍵在於這個屬性 vertical-align:middle;
------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標題頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-size:12px; }
.clearfix:after { content:'\0020'; display:block; height:0; clear:both; }
.clearfix { *zoom:1;
}
.test { height:100px; width:200px; line-height:100px; border:solid 1px #000; margin:100px auto; padding:0 30px; }
.test img{border:solid 1px #000; vertical-align:middle;}
</style>
</head>
<body>
<div class="test">
這個對齊了<img src="http://img..com/img/logo-.gif" />
</div>
</body>
</html>
6. div里圖片與文字水平居中對齊
vertical-align
用div把文字和圖片分別括起來，div設置float為left
<div style="height:500px;line-height:500px;">
<div style="float:left;height:500px;vertical-align:middle;">
<img src=""/>
</div>
<div style="float:left;height:500px;vertical-align:middle;">
sdf
</div>
</div>
與div圖片文字居中相關的資料
- 高冷文字圖片大全
- 最美的文字控圖片
- 怎麼把word的圖片批量保存
- qq主題圖片文字
- 悲傷帶有文字的圖片
- word文檔內如何旋轉圖片
- word圖片有一邊邊框不顯示
- word中怎樣設置圖片和紙張一樣大
- 將圖片覆蓋在文字上
- 手腕紋身英文字母圖片
- 圖片劇照文字
- 文字圖片有些人
- 如何截下word上的一張圖片
- word可編輯圖片格式
- WPS平板版word圖片尺寸
- 專利圖片及文字
- 在word中怎樣任意拖動圖片
- word里組合的圖片怎麼另存
- wps2016word怎麼裁剪圖片
- 文字圖片不後悔
- 熒光圖片文字愛情製作
- word摳圖圖片文件格式
- 順利文字圖片
- word傳輸圖片
- 莎士比亞英文字體圖片
- 假期生活圖片配文字的a4版
- 信息技術word插入圖片教案
- word圖片格式高度怎麼設置
- word中圖片形狀怎麼設置
- word里插入圖片無法顯示完整圖片
- 送祝福的圖片和文字
- 飛得高不高的文字圖片
- word文檔圖片浮在文字上快捷鍵
- 動態圖片中閃動的文字怎樣製作
- 手機word文檔如何導出圖片
- 豪橫一點的文字圖片
- 正規兼職文字圖片
- word怎麼把大量圖片有序的排版
- word一張圖片復製成九張
- 幼兒做作業圖片配文字
- 圖片復制到word顯示超大
- 暖男的文字圖片