Question

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

    div {
        width: 60%;
        margin: 50px 20%;
    }

    * {
        font-family: "Courier New", Courier, monospace;
    }

    div * {
        width: 100%;
    }

    h1 {
        text-align: center;
        font-size: 48px;
        padding: 0px;
        margin: 0px;
    }

    p.grey {
        color: grey;
        text-align: center;
        font-size: 24px;
        padding: 0px;
        margin: 0px;
    }

    p#ending {
        text-align: center;
    }

    ul {
        border-top: 3px solid black;
        border-bottom: 2px solid grey;
        margin-top: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    li {
        color: black;
        font-size: 18px;
        display: inline;
        margin-left: 50px;
    }

    div#images {
        border: 1px solid black;

    }

    div#images>img {
        width: 30%;

        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);

        filter: grayscale(100%);

        filter: gray;
    }

    li:hover, li:active {
        color: red;
    }

</style>
</head>
<body>
<div>
    <p class="grey">THE</p>
    <h1>ANALOG</h1>
    <p class="grey">SPECIALISTS</p>
    <ul>
        <li>HOME</li>
        <li>FOR SALE</li>
        <li>REPAIRES</li>
        <li>ABOUT</li>
        <li>CONTACT</li>
    </ul>
    <div id="images">
        <img src="http://www.99-taobao.com/uploads/151109/1-    151109142014X3.jpg" alt="pic1">
        <img src="http://www.99-taobao.com/uploads/151109/1-151109142014X3.jpg" alt="pic2">
        <img src="http://www.99-taobao.com/uploads/151109/1-151109142014X3.jpg" alt="pic3">
    </div>
    <p id="ending">We specialise in the sales and repair of classic keyboards, in particular
    the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.</p>
</div>
</body>
</html>

我认为这是一个愚蠢的问题，但我正在编写这段html和css代码，我想把div＃image居中，现在它不起作用，但如果我添加了边距 - 左：5％到div＃image，它会起作用。有谁知道为什么会这样？

结果如this。

在我添加了左边距后，它就像this一样很好。

Answer 1

将页面上给定div居中的可接受的CSS技术是使用：

    #images {
    margin:0 auto
}

auto只是告诉浏览器在元素的左侧和右侧之间均匀地分割可用空间。在可用空间中，它表示父容器的左右边缘之间的任何未占用的水平空间。

您还应该使用更多结构div来控制页面上的布局，例如：

 <div id="ThisHeader">

    <p class="grey">THE</p>
      <h1>ANALOG</h1>
         <p class="grey">SPECIALISTS</p>

      <div id="MenuMain">
    <ul>
        <li>HOME</li>
        <li>FOR SALE</li>
        <li>REPAIRES</li>
        <li>ABOUT</li>
        <li>CONTACT</li>
    </ul>

  </div> <!-- Close Menu Main -->

</div> <!-- Close header -->

对于标题，请应用宽度100％：

        #ThisHeader {
       width: 100%;
          }

这样可以防止标题中的项目弄乱页面上其他项目的布局。如果您有一个100％宽度的标题，那么可能浮动的项目下面的项目不会被它弄乱。

-

总结一下，您需要学习如何使用标题，主体和页脚等div来创建漂亮的CSS页面布局，以控制页面上元素的显示位置。我会研究一些基本的CSS布局技术。

Answer 2

你在div上设置了一个边距，并且还创建了该div width:100%的所有内容。这会导致div偏离中心，然后向右扩展。

如果您删除div * { width:100%; }，您就会明白我的意思。

您可能想要做的是让图片向左浮动，并将overflow:auto;放在div上以包含所有图片。

为什么div不在其父母身上

2 个答案: