當前位置：首頁 » 編程語言 » html怎麼居中圖片

html怎麼居中圖片

發布時間: 2021-03-19 02:27:10

Ⅰ 網頁中如何用html/CSS實現圖片居中於頁面

圖片是一個塊級元素，可以用塊級元素的方法居中，居中的方法有很多，我隨便列舉幾個：
一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
</head>
<style type="text/css">
.one{
width:500px;
height:500px;
margin: 0 auto;
background: orange;
position: relative;
}
.two{
width: 200px;
height: 200px;
background: orangered;
/*居中開始*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
</head>
<style type="text/css">
.one{
width: 500px;
height: 500px;
background: blue;
margin: 0 auto;
position: relative;
}
.two{
width: 200px;
height: 200px;
background: lightblue;
position: absolute;
top: 0;right: 0;bottom: 0;left: 0;margin: auto;
}
</style>
<body>
<div class="one">
<div class="two">
</div>
</div>
</body>
</html>
三：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
</head>
<style type="text/css">
.one{
width: 500px;
height: 500px;
margin: 0 auto;
background: green;
position: relative;
}
.two{
width: 200px;
height: 100px;
background: greenyellow;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
<body>
<div class="one">
<div class="two">
</div>
</div>
</body>
</html>

Ⅱ 如何使html中插入的圖片居中

需要將新建的html頁面進行一個保存，然後回到DW進行編輯，在body部分新建一個div標簽，並在其中插入內一張容img圖片。並給div添加簡單的css樣式，再將圖片套在一個p或者span標簽中，給標簽添加一個text-align:center屬性，就可以了。具體步驟如下：

Ⅲ html中使圖片居中的代碼是什麼

html中使圖片居中的抄代碼襲是：<img src="" alt="" align="center" />

Ⅳ 在html代碼中怎麼讓背景圖片居中

用background-position屬性來實現。

參考代碼：

<html>
<head>
<styletype="text/css">
body
{
background-image:url(/i/eg_bg_desert.jpg);'背景圖內
background-position:centercenter;'居中
background-repeat:no-repeat;'圖片不容重復

}
</style>
</head>
<body>
</body>
</html>

Ⅳ html中插入張圖片如何讓它居中

<img src="2008081801331242.gif"/> 這是圖片的代碼. 你可以這樣寫他們的寬高.<img src="2008081801331242.gif" width="300" height="300" alt="我是圖片哦!"/>還有加上alt注釋了版!讓圖片局中.是讓圖片在什權么地方局中哦! 你可以用<div align="center">...</div> 用<p align="center"> 用<td align="center"></td>都可以的.呵呵.歡迎點贊.有什麼不懂的再問我哦!

Ⅵ HTML如何讓圖片居中顯示呢

html文字居中和html圖片居中方法代碼，通過在html中實現文字居中圖片居中篇
在html中實現文字圖片內容居中有三種方法，其中兩種使用CSS樣式實現，一直使用原始的html標簽內加入「align="center"」（居中）實現。
一、對body加CSS居中樣式
-
TOP
我們直接對body設置CSS樣式：text-align:center
1、完整HTML實例代碼：
<!DOCTYPE
html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
charset="gb2312"
/>
<title>divcss5之居中實例</title>
<style>
body{text-align:center}
</style>
</head>
<body>
我會被居中
</body>
</html>
2、居中實例截圖
對body設置居中實現文字或圖片居中截圖
二、對文字外層對象加css居中樣式
-
TOP
首先我們CSS命名選擇器為「.divcss5」,對此選擇器內加居中樣式。我們實例演示2個DIV對象，一個放文字一個放圖片。
1、對應CSS代碼如下：
.divcss5{text-align:center}
2、完整HTML+DIV+CSS代碼如下：
<!DOCTYPE
html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
charset="gb2312"
/>
<title>divcss5之居中實例</title>
<style>
.divcss5{text-align:center}
</style>
</head>
<body>
<div
class="divcss5">我會被居中</div>
<div
class="divcss5"><img
src="divcss5-logo-201305.gif"
/></div>
</body>
</html>
、