CSS怎么讓圖片居中
1、首先先在頁面里加載一張圖片，代碼和效果如下圖所示：
2、然后設置給圖片起一個class名，方便一會兒的操作。
3、然后給圖片設置css樣式，因為方便的原因就直接在html頁面寫css樣式了。
4、經常使用“margin: 0 auto”來實現水平居中，而一直認為“margin: auto”是不能實現垂直居中，但是實際上，僅需要添加一些限制便能實現效果，就是通過定位：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
設置定位讓上下左右都為0，然后通過margin：0 auto，來讓元素實現上下左右都居中。
5、設置完CSS樣式之后，通過瀏覽查看代碼的效果就可以，可以看到圖片已經實現了。
6、最后給大家附上全部的代碼：
<!DOCTYPE html>
<html>
<head>
<meta chart="utf-8" />
<title>使用CSS讓圖片水平垂直居中</title>
</head>
<body>
<img class="pic" src="img/timg.jpg" alt="" />
</body>
<style type="text/css">
.pic{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</html>
CSS中怎么讓圖片在盒子里居中呢？
需要準備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
2、其次，在index.html中的<style>標簽中，輸入css代碼：div{border: 1px solid blue; text-align: center}。
3、瀏覽器運行index.html頁面，此時圖片在盒子中是居中顯示的。
怎樣用css只讓div中的圖片居中？
1、打開在線寫前端代碼的網站如jsrun或者jsfiddle。
目2、標是做一個如圖所示的效果，不同大小的圖片。
3、每個方框的html 如下，
<div>
<span>
<img src='圖片地址'>
</img>
</span>
</div>
4、css如下，其中需要注意的是，不要設置最外層div的大小，只設置span的大小，讓span的大小決定div的大小。
其中
display: table-cell;
text-align: center;
vertical-align: middle;
這3行決定居中效果。
其中
img {
max-width: 100%;
max-height: 100%;
}
的目的是讓圖片可以縮放而比例不變。
div {
float:left;
margin:5px;
padding:5px;
border:1px solid #000;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
5、效果如下，很好的實現居中。
6、上面是div為float的情況
div如果是absolute或fixed也可以正常表現。
只有一個div的情況下，代碼如下
<div>
<span>
<img src='圖片地址'>
</img>
</span>
</div>
div {
margin:5px;
padding:5px;
border:1px solid #000;
position: absolute;
left:100px;
top:100px;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
7、這張圖片仍然是居中的，沒有收到父容器的影響。
圖片居中怎么設置 css
寫個簡單的例子給你吧
htlm如下：
<h4>圖片水平居中</h4>
<div class="demo1">
<img src="你的圖片" alt="">
</div>
<h4>圖片垂直居中</h4>
<div class="demo2">
<div class="imgbox">
<img src="你的圖片" alt="">
</div>
</div>
<h4>圖片水平垂直居中</h4>
<div class="demo3">
<div class="imgbox">
<img src="你的圖片" alt="">
</div>
</div>
css如下：
<style type="text/css">
.demo1{width: 200px;height: 200px;border: 1px solid #ccc;display: inline-block;text-align: center;}
.demo1 img{width: 100px;height: auto;}
.demo2{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}
.demo2 .imgbox{display: table-cell;vertical-align: middle;}
.demo2 .imgbox img{width: 100px;height: auto;}
.demo3{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}
.demo3 .imgbox{display: table-cell;vertical-align: middle;text-align: center;}
.demo3 .imgbox img{width: 100px;height: auto;}
</style>
怎么使用CSS讓圖片水平垂直都居中？
CSS是層疊樣式表。下面，我們來看看怎么使用CSS讓圖片水平垂直都居中吧。
新建一張文檔在桌面新建一張文本文檔，改名為1.txt，如下圖所示：
基礎代碼然后打開文本文檔，編寫基礎代碼，再把桌面上的老虎圖片引入進去，如下圖所示：
后綴名然后把文本文檔后綴名改為.html，如下圖所示：
運行網頁然后在瀏覽器中運行網頁，現在圖片有了，只是還沒有居中，圖片居住代碼要用CSS寫，如下圖所示：
CSS代碼然后寫上CSS代碼，如下圖所示：
垂直水平居中可以看到圖片已經垂直和水平居中，如下圖所示：
總代碼 <!DOCTYPE html>
<head>
<title>html</title>
<style type="text/css">
.picTiger{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<img class="picTiger" src="C:/Urs/Administrator/Desktop/1.jpg">
</body>
<html>
css里面如何把圖片居中
水平居中：
1、單獨文字垂直居中只需要設置CSS樣式line-height屬性即可。
2、文字與圖片同排，在設置div高度同時再對此css樣式的圖片“img”樣式設置vertical-align:middle垂直居中屬性，如.yangshiimg{vertical-align:middle;}。
3不確定寬度的塊級元素設置水平居中的方法：
（1）、是使用table作為容器的方法來實現。當然不大推薦使用這種方法，因為添加了無意義的標簽。介紹一下。Table標簽本身并不是塊級元素，當不設置table的寬度的話，里面的寬度是由他內部元素的寬度撐起來的。但即使沒有設置table的寬度，直接設置table的外邊距margin：0auto;就可以實現水平居中了!這樣就可以通過設置table水平居中，間接使里面的內容居中。
（2）、相對于用table的方法的好處是不用增加無語義標簽，簡化標簽嵌套深度。這個思路是這樣的，通過改變塊級元素的display屬性值為inline類型，然后設置text-align:center來實現居中。這種方法也有一定不妥之處就是把塊級元素改為行內元素后，行內元素比塊元素少了一些功能。比如說設定長寬值等，在項目運用中可能會有一些限制，可以自行選擇。
（3）、通過給父元素設置浮動float，再設置父元素的position屬性為relative和left：50%;子元素設置position：relative和left：-50%來實現水平居中。這個好處是可以保留塊級元素仍然是以display：block的形式顯示，不會添加無意義的標簽，不添加嵌套深度。確點是設置了position：relative;帶來了一些副作用。下面是第三種方法的實例代碼，放到body標簽里面就可以了。
垂直居中：
1．對這個CSS居中問題，可以使用設置背景圖片的方法。舉例：
body{BACKGROUND:url(”圖片文件”)#FFFno-repeatcenter;}
關鍵就在于這個Center屬性，它表示讓該背景圖片在容器中居中。也可以把Cener換成TopLeft或者直接寫上數字來調整它的位置。
2．如何使文本在DIV中垂直居中
對于文字，便不能用背景方法，可以用增高行距的辦法變通實現垂直居中，示范代碼如下：
#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;height:200px;vertical-align:middle;line-height:200px;}
<divid=”center”><p>testcontent</p></div>
說明：
vertical-align:middle;表示行內垂直居中，將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。
圖片垂直居中的實例：
CSS代碼復制
.new_proimg{
display:table-cell; /*非IE的主流瀏覽器識別的垂直居中的方法*/
vertical-align:middle; /*非IE的主流瀏覽器識別的垂直居中的方法*/
text-align:center; /*設置水平居中*/
*display:block; /*針對IE的Hack*/
*font-size:104px; /*約為高度的0.873，120*0.873約為104*/
*font-family:Arial; /*防止非utf-8引起的hack失效問題，如gbk編碼*/
width:120px;
height:120px;
margin-bottom:5px;
border:1pxsolid#eee;
}圖片垂直居中建議：
1、單獨文字垂直居中只需要設置CSS樣式line-height屬性即可。
2、文字與圖片同排，在設置div高度同時再對此css樣式的圖片“img”樣式設置vertical-align:middle垂直居中屬性，
如.yangshiimg{vertical-align:middle;}。
本文發布于:2023-02-28 19:20:00，感謝您對本站的認可！
本文鏈接：http://www.newhan.cn/zhishi/a/167760974457576.html
版權聲明：本站內容均來自互聯網，僅供演示用，請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系，我們將在24小時內刪除。
本文word下載地址：css圖片居中(css圖片居中對齊).doc
本文 PDF 下載地址：css圖片居中(css圖片居中對齊).pdf
| 留言與評論（共有 0 條評論） |
