css中怎么让img图片居中
生活随笔
收集整理的這篇文章主要介紹了
css中怎么让img图片居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css中怎么讓img圖片居中？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
首先我們來了解一下display屬性實現圖片居中的兩種方法是什么？
1、利用display的table-cell屬性值，再配合text-align: center;與vertical-align: middle;設置圖片居中
2、設置display: flex;，利用彈性布局flex來設置img圖片的居中
下面我們通過簡單的代碼示例，詳細了解一下這兩種方法是怎么實現圖片居中的。
1、利用display:table-cell來實現img標簽圖片的水平和垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img圖片居中</title>
<style>
.demo{
width: 400px;
height: 300px;
border: 1px dashed #000;
display: table-cell; /*主要是這個屬性*/
vertical-align: middle;
text-align: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" />
</div>
</body>
</html>
效果圖：
說明：
在demo盒子中設置display: table-cell;會讓demo盒子作為一個表格單元格顯示（類似 <td> 和 <th>），在設置text-align: center;就會讓img圖片水平居中，設置vertical-align: middle;讓img圖片垂直居中。
2、彈性布局flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img圖片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
display: flex;
justify-content: center;
align-items: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" />
</div>
</body>
</html>
效果圖：
說明：
設置display: flex;實現flex彈性布局，在設置justify-content: center;讓圖片水平居中對齊，設置align-items: center;讓圖片垂直居中對齊。
總結
以上是生活随笔為你收集整理的css中怎么让img图片居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql数据库 sid_jdbc连接数
- 下一篇： JavaScript如何实现汉字转拼音