Question

不确定为什么会发生这种情况，但是当试图通过保证金来实现中心.front：auto;它的偏离中心相当多。这是它的图片：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

因为您没有给图像一个宽度。块级元素默认为100％宽，因此使用auto应用的任何边距都将为零。

Answer 2

没有剩余空间来保留你的div.front 块元素占用它的父级的全宽，直到指定图像宽度的值，像这样： toggle 而且你不需要使它成为块元素。或尝试将标记更改为：

img.front { width: 500px; /*for example*/ height: 300px; /*for example also*/ }

Answer 3

尝试在图片上添加一些宽度，例如width:99%;，然后添加margin:0px auto;

为什么我的保证金：自动;偏心？

3 个答案: