當前位置:首頁 » 網頁前端 » 怎麼設置圖片居中web
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

怎麼設置圖片居中web

發布時間: 2022-04-01 08:41:18

A. Html如何讓設置的背景圖片居中顯示

直接用no-repeat就可以了
body{background:url(http//:圖片位置)參數}/*可識別的圖片格式為jpg、gif、bmp等*/
主要參數:
repeat:背景圖像在縱向和橫向上平鋪
no-repeat:背景圖像不平鋪
repeat-x:背景圖像在橫向上平鋪
repeat-y:背景圖像在縱向平鋪
實例
background:#0066ccurl(圖片)no-repeatfixedcenter;

topright表示圖片與瀏覽器的頂邊和右邊對齊
bottomleft表示圖片與瀏覽器的底邊和左邊對齊

B. web如何使圖片居中

在你插入圖片前面加<CENTER>

C. 圖片居中怎麼設置 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>

D. CSS怎麼讓圖片居中

1、首先先在頁面里載入一張圖片,代碼和效果如下圖所示:

E. 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>

F. 網頁製作圖片怎麼居中

圖片的寬度和高度是未知的,沒有一個固定的尺寸,在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中,想想感覺還是挺麻煩的,由於最近的項目可能會用到這個方案,所以把一些常用的方法都收集整理了一下。

下圖是理想中的效果圖,外部容器的寬度和高度是固定的,中間的圖片寬度和高度未知,但是圖片要始終要相對於外部的容器垂直居中。

但是實際中實現的效果並不是很完美,由於各瀏覽器的解析都各不相同,所以各瀏覽器都會有1px-3px的偏差。

方法一 (XHTML 1.0 transitional):

該方法是將外部容器的顯示模式設置成display:table,img標簽外部再嵌套一個span標簽,並設置span的顯示模式為display:table-cell,這樣就可以很方便的使用vertical-align象表格元素那樣對齊了,當然這只是在標准瀏覽器下,IE6/IE7還得使用定位。

HTML結構部分:

<div id="box">
<span><img src="images/demo.jpg" alt=""></span>
</div>

CSS樣式部分:

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional):

方法二和方法一的實現的原理大同小異,結構也是相同的,方法一用的是條件注釋,方法二就用的CSS Hack。

CSS樣式部分:

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*針對IE6/7的Hack*/
top:50%; /*針對IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對IE6/7的Hack*/
top:-50%;left:-50%; /*針對IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

該方法有個弊端,在標准瀏覽器下由於外部容器#box的顯示模式為display:table-cell,所以導致#box無法使用margin屬性,並且在IE8下設置邊框也無效。

方法三 (XHTML 1.0 strict):

標准瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell,IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。

HTML結構部分:

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS樣式部分:

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->

方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集於網頁教學網,暫時只對這3個方法比較滿意,兼容性方面不錯,使用起來的限制也比較小,還有些方法我也都一一測試過,效果都不理想,在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

G. html中怎樣讓插入的圖片居中

一般來說可以用CSS中的「text-align:center屬性,margin:0 auto或定位屬性」就可以居中。但是主要看是看你的頁面布局是怎樣的,是否用了定位

1、img標簽中的align屬性不是定義圖像的位置,而是定義圖像與周圍文字的位置,並且不推薦使用這個屬性。

2、要給img定義一個父標簽,讓這個父標簽裡面的內容居中,那麼img自然就居中了。

比如說:<p align="center">img……</p>

H. 在網頁設計中怎麼讓背景圖片水平居中

CSS使網頁背景圖片居中的三種方法。
1、第一種:用像素設定,很多都用這種,但是也是最麻煩的:
<div style="width:800px;height:600px;background:url(圖片地址) no-repeat 250px 270px;border:1px solid #cccccc;"></div>

2、第二種:用50%設定,很方便。
<div style="width:800px;height:600px;background:url(圖片地址) no-repeat 50% 50%;border:1px solid #cccccc;"></div>

3、第三種:用center設定(註:第2個center可以省略,因為默認就是center)。
<div style="width:800px;height:600px;background:url(圖片地址) no-repeat center center;border:1px solid #cccccc;"></div>

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

需要准備的材料分別有:電腦、瀏覽器、html編輯器。

1、首先,打開html編輯器,新建html文件,例如:index.html,填寫問題基礎代碼。

J. 怎麼才能讓網站的圖片居中

<TABLE width=1003 border=0>改成<TABLE width=1003 border=0 align=center>或者在table前後加上<div align="center">
</div>