私のマージンはなぜですか？非中心地？

これはなぜ起こっているのか分かりませんが、marginを行うことで.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

あなたdiv.front は、ブロック要素は、あなたがのために値を指定するまで、それの全幅が親のかかるマージンに何の残りのスペースはありません、あなたのイメージにwidth:99%;のようないくつかの幅を追加しmargin:0px auto;

出典

2017-10-15 23:38:59 George

私は試してみるとまだ中心から外れています。 – Lucas

私は電話をしています。追加幅がない場合、親がすべてのスペースを取るかどうかを確認します。 – George

divに背景色を追加して、何をしているのか確認してください – George

を追加しよう画像幅、のように： 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

私のマージンはなぜですか？非中心地？

答えて

関連する問題