為什么我的保證金是：auto; 偏心？
[英]Why is my margin:auto; off-center?
問題描述
不知道為什么會這樣，但是在嘗試通過margin：auto;將.front居中時； 它偏離中心很多。 這是一張照片：
body{ font-family: 'Proza Libre', sans-serif; background-color:#f7f3de; overflow-x: hidden; } .para{ text-align:left; position:relative; display:inline; right:-100px; } .links{ text-align:center; width:100%; position:relative; display:inline-block; font-size:20px; top:-50px; word-spacing:30px; } .logo{ position:relative; display:block; float:right; width:16%; top:-100px; right:100px; } .front{ position:relative; top:70px; display:block; margin-left:auto; margin-right:auto; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="beach.css"> <link href="https://fonts.googleapis.com/css?family=Proza+Libre" rel="stylesheet"> <title>Lucas Essex</title> </head> <body> <div class="para"> <h1>Beach Corp Inc.</h1> </div> <div class="links"> <a href="asdasd.com">FAQ</a> <a href="asdasd.com">About</a> <a href="asdasd.com">Social</a> <a href="asdasd.com">Contact</a> </div> <div> <img src="http://samuibeautifulbeachvillas.com/assets/samui-beautiful- beach-villas.png" class="logo"> </div> <div class="gang"> <img src="http://www.beaches.com/assets/img/home/rst-btc.jpg" class="front"> </div> </body> </html>
3 個解決方案
解決方案1
1 已采納 2017-10-15 23:32:52
因為您沒有給圖像指定寬度。 默認情況下，塊級元素的寬度為100％，因此auto應用的任何邊距將為零。
解決方案2
1 2017-10-15 23:53:09
在為圖像寬度指定值之前，block元素將采用其父元素的完整寬度，因此沒有足夠的空間來填充div.front，如下所示： img.front { width: 500px; /*for example*/ height: 300px; /*for example also*/ } img.front { width: 500px; /*for example*/ height: 300px; /*for example also*/ } img.front { width: 500px; /*for example*/ height: 300px; /*for example also*/ } ，您無需將其設置為block元素。 或嘗試將標記更改為：
<img class="className" src="http://examole.com" width="500" height="300"/>
解決方案3
0 2017-10-15 23:38:59
嘗試在圖像上添加一些寬度，例如width:99%; 然后添加margin:0px auto;
div中具有自動邊距的HTML CSS div偏離中心嗎？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.