|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
[2示例]如何使用CSS將div中的圖像居中對(duì)齊（垂直和水平）
作者:admin 時(shí)間:2022-9-9 15:0:48 瀏覽:在本文中，我們將了解如何使用 CSS 將 div 標(biāo)簽中的圖像居中對(duì)齊，并通過示例了解其實(shí)現(xiàn)。給定一個(gè)圖像，我們需要將圖像設(shè)置為與更大 div 內(nèi)的中心（垂直和水平）對(duì)齊。這可以通過使用元素的位置屬性來完成。
示例 1：本示例使用position屬性使圖像居中對(duì)齊。
<!DOCTYPE html>
<html>
<head>
<style>
#Outer {
border: 2px solid black;
height: 300px;
position: relative;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="Outer">
<img src="1.gif" />
</div>
</body>
</html>
輸出
示例 2：此示例使用center屬性將圖像設(shè)置為在 div 中居中。我們也可以使用這種方法將項(xiàng)目對(duì)齊到中心。
<!DOCTYPE html>
<html>
<head>
<style>
#Outer {
border: 2px solid black;
height: 300px;
background: url(1.gif)
no-repeat center center;
}
</style>
</head>
<body>
<div id="Outer"></div>
</body>
</html>
輸出：從輸出中，我們可以看到輸出與之前的輸出相同。
相關(guān)文章
相關(guān)文章
x
- 站長(zhǎng)推薦
