css實現文字和圖片居中效果

admin發表於2017-03-09
CSS

如果把圖片和文字放在一個容器中，大家會發現，在預設狀態下文字和圖片是無法垂直對齊的，通常情況下垂直對齊會更為美觀一些，下面就通過程式碼例項介紹一下如何實現文字和圖片的垂直對齊效果。

解決方案一:

可以使用vertical-align:middle屬性實現垂直對齊效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:250px;
  height:50px;
}
#thediv img{vertical-align:middle;}
</style>
</head>
<body>
<div id="thediv"><img src="mytest/demo/code.jpg">螞蟻部落</div>
</body>
</html>

上面的程式碼實現了我們的要求，就是設定圖片的vertical-align:middle，需要特別注意的是，這個不是設定給圖片的容器的，而是圖片自身，IE6瀏覽器不相容，不過當前來講，IE6可以不用考慮了。

解決方案二:

在上面的程式碼中，IE6瀏覽器具有相容性問題，當然雖然IE6隨著時間的推移會慢慢消亡，但是還是有很多行業或者部門在使用，下面介紹一種能夠相容所有瀏覽器的效果，那就是將圖片設定為背景的方式。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:70px;
  height:50px;
  line-height:50px;
  background:url(mytest/demo/code.jpg) no-repeat left center; 
  padding-left:130px;
}
</style>
</head>
<body>
<div id="thediv">螞蟻部落</div>
</body>
</html>

採用背景圖片定位的方式，也可以實現圖片和文字的垂直居中效果。

相關文章