設計網站時怎麼把圖片居中_html中怎樣讓插入的圖片居中

❶ html中怎樣讓插入的圖片居中

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

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

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

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

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

CSS使網頁背景圖片居中的三種方法。
1、第一種：用像素設定，很多都用這種，但是也是最麻煩的：
2、第二種：用50%設定，很方便。
3、第三種：用center設定（註：第2個center可以省略，因為默認就是center）。

❸ 怎麼讓圖片居中網站製作

這個說明是你的其他父容器的css屬性繼承下來影響的吧，你可以通過打開瀏覽器，打開這個網頁後，按鍵盤上的「F12」,選擇「HTML」標簽下的那個箭頭，用這個箭頭去選中你的圖片，查看它的css代碼就知道是誰影響到圖片的居中屬性了，實在不行你把代碼貼上來我幫你看看！

有問題你可以追問，沒問題，望採納，謝謝！

❹ 網頁製作圖片怎麼居中

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

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

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

方法一 (XHTML 1.0 transitional)：

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

HTML結構部分：

CSS樣式部分：

方法二 (XHTML 1.0 transitional)：

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

CSS樣式部分：

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

方法三 (XHTML 1.0 strict)：

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

HTML結構部分：

CSS樣式部分：

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

❺ 網頁中如何用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>

❻ 網站首頁圖片不能對齊，怎麼可以把圖片居中，我有後台

對齊方式

對齊方式是段落內容在文檔的左右邊界之間的橫向排列方式。Word共有5種對齊方式：左對齊、右對齊、居中對齊、兩端對齊和分散對齊。

左對齊是將文欄位落的左邊邊緣對齊；
兩端對齊是將文欄位落的左右兩端的邊緣都對齊；
兩者異同：
這兩種對齊方式的左邊都是對齊的，而一般來說，如果段末最後一行字數太少，那麼最後一行「兩端對齊」的效果與「左對齊」的效果一樣；又由於我們的閱讀習慣基本上都是從左到右，且中文文章中的行尾相差不，不注意看不出其中差別，因此，人們就會覺得「左對齊」與「兩端對齊」的效果一樣。

其實呢，兩者之間是有區別的，「兩端對齊」的段落的右邊也是對齊的，而「左對齊」的右邊一般情況下不會對齊。做個試驗：你在word中輸入一段比較長的英文文字，分別使用兩種不同的對齊方式，仔細觀察，就會發現兩者之間的差別了。

因為一般來說，我們有這樣的書寫規則：
大部分標點符號不能放在行首，比如句號「。」、問號「？」等；
一串字元（一個英文單詞、一串數字）不能拆開或割斷放在不同的兩行；

於是，在這樣的書寫規則下，我們常常會遇到文章各行的文字（字元）數不相等的情況，這時採用「左對齊」的方式，就會出現每行行尾不整齊的情況，而採用「兩端對齊」的方式，就會把超出的行壓縮、減少的行拉伸，使整個段落各行右端也對齊（末行除外），這樣的文章看上去就比較美觀些。

在兩端對齊方式中，由於通常每段最後一行都比其他行短，文本會顯得沒有兩端對齊。要使具有兩端對齊格式的段落中的最後一行也兩端對齊，請將插入點置於最後一行末尾，然後按 Shift+Enter。請注意，如果對齊的行很短，會在單詞間插入大段的空白，因而會使該行顯得不美觀。

設計網站時怎麼把圖片居中

與設計網站時怎麼把圖片居中相關的內容