HTML/CSS - 試圖居中圖像，而忽略身體的利潤

Foo.html：HTML/CSS - 試圖居中圖像，而忽略身體的利潤

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="testStyle.css" /> 
</head> 
<body> 
    The appearance of the text is good. This image should be centered, but it isn't: 
    <img class="centerblock" src="ice cream cone and dish.png" width="320" height="200"></img> 
</body>

TestStyle.css：

body {margin-left:30px;} 
body {margin-right:30px;} 
.centerblock { 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
}

結果：

enter image description here

來源

2012-10-30 William Jockusch

嘗試：

.centerblock { 
position:fixed; 
top:10px; 
left: 10px; 
}

也許這可以幫助，雖然我不知道如果你打開手機會發生什麼。

我會使主要內容區域適合顯示邊緣併爲每個元素定義所有對齊屬性。

這是從來沒有非常聰明的事：

body {margin-left:30px;} 
body {margin-right:30px;}

也有選擇：

.main-container { 
margin: 0 auto; 
}

這也是中心的所有內容，但我想，也不會解決你的問題。

來源

2012-10-30 04:33:27

HTML/CSS - 試圖居中圖像，而忽略身體的利潤

回答

相關問題