html中怎麼使圖片和文字居中對齊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
web開發中，同學們經常遇到的一個問題是，當將圖片和文字放置在一個div標籤的時候，如果不加任何修改，是無法水平居中對齊的，顯然這個不是很美觀，本經驗將提供一種居中對齊的方法，希望對需要的同學有所幫助，也歡迎大家交流其他更好的方法。
材料/工具
html/css 代碼編輯器 瀏覽器
.top ul li 下面添加：text-align: center;line-heigh
方法
首先 新建a.html文件，並準備一張小標，如下：
按照如下修改就可以對齊了<!DOCTYPE html"><html&g
使用瀏覽器打開a.html，可以看到默認情況，是圖片置頂對齊，文字置底對齊，所以通常圖片高，文字低，不能水平居中對齊，如下：
需要準備的材料分別有：電腦、瀏覽器、html編輯器。1、首先，打開html編輯器，新建html文件
再次編輯a.html，加入以下css代碼：
在表單的標頭中加入 align="center" 居中代碼
.hlong *{display:inline-block;vertical-align:middle}
在css中，背景圖片是可以選擇顯示的位置的，用像素控制，背景居中的話直接用這個代碼.beijing
保存
再次使用瀏覽器訪問a.html頁面，效果如圖。是不是很簡單呢？
img是內聯元素，p標籤是塊級元素，所以p標籤內的文字換行很正常。strong標籤是內聯元素，所
擴展閲讀，以下內容您可能還感興趣。
html如何使文字和圖片的中部對齊?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.main{ vertical-align:middle}
</style>
</head>
<body>
<div class="main">
我是和圖片e79fa5e98193e4b893e5b19e31333337383833居中對齊滴。<img src="file:///C|/Users/Administrator/Desktop/QQ圖片*0403172529.png" style="vertical-align:middle" width="276" height="267" />
</div>
</body>
</html>
css中讓文字和圖片對齊的問題
百 img是內聯元素，p標籤是塊級度元素，所以p標籤內的文字換行很正常。strong標籤是知內聯元素道，所以會跟img處於同一行，想要img跟strong中的文字專垂直居中屬對齊，需要設置img的vertical-align為middle。
html裏面table表格中如何移動圖片使其和文字對齊
按照如下e79fa5e98193e59b9ee7ad9431333337383961修改就可以對齊了
<!DOCTYPE html"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
table{width:1200px;margin:0px auto;}
tr{width:1200px;height:30px;list-style-type:none;}
th{border:1px solid #000;font-size:12px;font-family:"微軟雅黑";line-hegiht:30px;}
/*修正1 設置垂直對齊為居中*/
th>span,th>img {
vertical-align: middle;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th class="th_1">2</th>
<!-- 修正2 給文字加一個容器 -->
<th class="th_2"><span>烏魯木齊</span><img src="2.jpg" height="12" title="加班過長"/></th>
</tr>
</table>
</body>
</html>追問大神 問一個問題 th>span,th>img 這是什麼寫法？是啥意思追答匹配所有th標記下的子代span和img標記
css html 如何讓div裏邊的圖片和文字同時上下居中？
img標籤是行內知元素，所以設置文本和圖片垂直道居中只需要把div的line-height設置內成和div的height值相同即可。
代碼：容
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{width: 400px; height: 400px; margin: 20px;line-height: 400px;font-size: 26px; border: 1px solid red;background-color: #ccc;}
div>img{ vertical-align: middle;}
</style>
</head>
<body>
<div >
第一項
<img src="1.png" width="120" height="120" />
</div>
</body>
</html>更多追問追答追問
手機和平板上的兼容性能保證嗎？我在平板上調試時，如下
再在手機上就不行了
追答沒聽過説也沒遇到line-height屬性存在兼容問題，可以把手機端的效果截圖看看麼？追問.bottomBtn > ul > li > img{display: inline-block; width:3.125rem;height:2.375rem;vertical-align: middle;}圖像部分的css，在平板上我調節inlineheight 可以居中，但是再用手機調試時就不行了追答你這個説的是哪一塊呢？那段文字不顯示了應該是line-height>height了。追問bottomBtn > ul > li > img{display: inline-block; width:3.125rem;height:2.375rem;vertical-align: middle;} 説的是
追答line-height>height了追問.footTitle{color: #333;font-size: 1rem;line-height: 10rem}
我想讓手機上邊如下顯示
追答不知道你包裹img的li標籤的屬性是怎麼設置的？追問.bottomBtn > ul > li{height: 32.5%;margin:5% 0%; }
.bottomBtn > ul {height: 90%;}
.bottomBtn{width:25%;height:85%;float: left;margin-top: 65px;}追答你li標籤的高度是設置的百分比，到手機端32.5%要小於line-height: 10rem。肯定就是這個效果呀。要麼把li標籤的高度也定位rem。或者不要是指line-height。通過margin實現垂直居中。追問高手就是高手！
div+css中 圖片和文字對齊
</style>
#content
{
width:422px;
height:180px;
border-bottom:1px dashed #96c5ef;
}
img{
border:2px solid #ca0000;
float:left;
}
.left{
float:left;
vertical-align:middle;
}
.right{
float:right;
width:230px;
font:12px;
}
</style>
</head>
<body>
<div id="content">
<div class="left">
<img src="images/1.jpg"
<!--這裏是我改動的地方-->
align="absmiddle">
<!--這裏是我改動的地方-->
最新資訊
</div>
<div class="right">
<ul>
<li><a href="#">A股恐慌式跳水重挫3.68% 大盤跌回 </a></li>
<li><a href="#">股指緩慢企穩 黃金板塊逆市上漲 </a></li>
<li><a href="#">港股後市堪憂 韓國股市暫636f7079e799bee5baa631333335313237停交易 </a></li>
<li><a href="#">中國萬億美債或面臨縮水</a> </li>
<li><a href="#">日經指數收低</a> </li>
<li><a href="#">七國集團發聯合聲明稱將保證金融 </a></li>
<li><a href="#">標普或再降美信用評級 </a></li>
</ul>
</div>
</div>
</body>
</html>
最終的圖片
