为什么div没有在其父母

<!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＃图像，现在它不工作，但是如果我添加margin-left：5％到div＃图片，它将起作用。有谁知道为什么它是这样的？为什么div没有在其父母

结果看起来像this。

我添加了余裕后，它运行得很好，如this。

来源

2016-06-12 司徒残影

尝试：margin：0 auto;在#images css块。你的所有div被强制为60％的宽度。所以，你有一个智慧，你可以用这个块来定位。 –

被接受的CSS技术中心的网页上给定格是使用：

#images { 
    margin:0 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 -->

For头，采用100％的宽度：

 #ThisHeader { 
     width: 100%; 
      }

这将防止标题中的项目搞乱了页面上其他项目的布局。如果您的头宽度为100％，那么浮动下方的项目不会被它弄乱。

总结会，你需要学习如何创建使用的div像头，型主体和页脚，控制自己的页面上的元素将出现一个不错的CSS网页布局。我会研究一些基本的CSS布局技巧。

来源

2016-06-12 12:41:30 Atrix

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

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

你可能想要做的是让你的图像浮动到左边，并把一个overflow:auto;到div以包含所有的图像。

来源

2016-06-12 12:15:22 Rob

为什么div没有在其父母

回答

相关问题