爲什麼我的保證金：汽車;偏心？

不知道爲什麼會發生這種情況，但嘗試通過做邊緣嘗試居中.front：auto;它的偏心位置相當多。下面是它的照片：爲什麼我的保證金：汽車;偏心？

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>

來源

2017-10-15 Lucas

因爲你沒有給圖像的寬度。塊級元素默認爲100％寬，因此auto應用的任何保證金都將爲零。

來源

2017-10-15 23:32:52 Rob

所以，我怎麼會居中圖像與出它被關閉這樣的中心？ – Lucas

按照我所說的添加圖片的寬度。你遇到的另一個問題是另一個問題。爲了展示這個問題，刪除其他圖片，你會看到一切正常。 – Rob

它不能以定義的寬度工作... – Johannes

嘗試在您的圖像上添加一些寬度像width:99%;然後添加margin:0px auto;

來源

2017-10-15 23:38:59 George

當我嘗試時，它仍然偏離中心。 – Lucas

我正在打電話。檢查父代是否佔用全部空間 - 如果沒有加寬，則爲寬度：100vw; – George

爲你的div添加一些背景顏色，看看你在做什麼 – George

沒有剩餘空間保證金您div.front 塊元素需要它的整個寬度的父，直到你指定的值圖像寬度，是這樣的： img.front { width: 500px; /*for example*/ height: 300px; /*for example also*/ } 並且您不需要使其成爲塊元素。或試圖改變標記來：

<img class="className" src="http://examole.com" width="500" height="300"/>

來源

2017-10-15 23:53:09 user8781532

爲什麼我的保證金：汽車;偏心？

回答

相關問題