Question

所以我正在制作一个练习网站来学习HTML和CSS，我不能把这个div放到中心位置。我尝试过使用margin：0 auto但它对div没有任何作用。这是代码的样子，我试图集中的div是“工作样本”：

HTML：

<div id="work-div">

    <div class="title black" id="work-title">My Work</div>

    <div class=""clear></div>

    <div id="work-sample-div">

        <div class="work-sample">       
            <a href="https://www.google.com/" class="work-title">Google.com</a>
            <div class="clear"></div>
            <a href="https://www.google.com/"> <img src="images/googlethumbnail.jpg"></img> </a>
            <p>Duis id pellentesque sapien. Praesent egestas ut eros eget convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet lacinia dui.</p>
        </div>

    </div>

</div>

CSS：

.black{
    color:black;
}

body {
    padding:0;
    margin:0;
    width:100%;
    font-family: Century Gothic, sans-serif;
}

.clear{
    clear:both;
}

.top-margin {
    margin-top:50px;
}

.title {
    font-size:4em;
    text-align:center;
}

#work-title {
    padding-top:20px;
}

.work-sample {
    font-size:.8em;
    border: solid 1px black;
    width:40%;
    padding: 20px;
    margin: 20px;
    border-radius:20px;
    float:left;
    min-width:400px;
}

.work-sample img {
    float:left;
    margin-top:10px;
    width:40%;
    border:1px black solid;
}

.work-sample p{
    overflow:hidden;
    padding-left:5px;
}

.work-sample a {
    color:black;
    text-decoration:none;
}

.work-title {
    font-size:3em;
}

#work-div {
    height:100vh;
}

以下是指向目前状态的codepen示例的链接：http://codepen.io/anon/pen/bVROOK

Answer 1

在删除float：left后，再次尝试使用margin 20px auto; 您的代码应如下所示：

.work-sample {
    font-size:.8em;
    border: solid 1px black;
    width:40%;
    padding: 20px;
    /* auto left and right */
    margin: 20px auto;
    border-radius:20px;
    /* this line has to be removed; otherwise margins left/right are useless
    float:left;*/
    min-width:400px;
}

Answer 2

只需添加以下CSS代码：

#work-sample-div
{
    width: 100%;
    display: flex;
    justify-content: center;    
}

CSS - Div不居中

2 个答案: