Question

我试图将这些div放在中心（彼此相邻的所有3个位于页面的中心），但是我不能让它们居中。

以下是它们的外观，例如：http://callum.website/

代码：

HTML

<div class="containercontainer">
<div class="containerleft">

    <figure class="image-container">

        <img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">

        <figcaption class="clearfix">

            <h4>eSportsy - FREE PSD Template</h4>
            <p>in <font color="0ead99"><B>FREEBIES</B></font></p>
            <a href="" class="dlbutton" target="_blank">Download</a>

        </figcaption>

    </figure>

</div>

    <div class="container">

    <figure class="image-container">

        <img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">

        <figcaption class="clearfix">

            <h4>eSportsy - FREE PSD Template</h4>
            <p>in <font color="0ead99"><B>FREEBIES</B></font></p>
            <a href="" class="dlbutton" target="_blank">Download</a>

        </figcaption>

    </figure>

</div>

        <div class="containerright">

    <figure class="image-container">

        <img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">

        <figcaption class="clearfix">

            <h4>eSportsy - FREE PSD Template</h4>
            <p>in <font color="0ead99"><B>FREEBIES</B></font></p>
            <a href="" class="dlbutton" target="_blank">Download</a>

        </figcaption>

    </figure>

</div>

body{
background: #F3F3F3;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
color: #2A2A2A;
 }

h4 {
color: #fff;
margin: 0;
padding: 0;
}

p {
margin: 0;
}

.containercontainer{
width: 66%;
margin: 0 auto;
max-width:100%;
text-align: center;
}

.containerleft {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
float:left;
}

.container {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
}

.containerright {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
float: right
}

.container a{
text-decoration:none;
}

.container img{
bottom: 0;
display: block;
height: auto;
max-width: 100%;
}

.button {
background: #0084b4;
border-radius: 3px;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 4px 8px;
position: absolute;
right: 20px;
top: 30px;
}

.button:hover {
background: #2D76B9;
color: #fff;
}

.dlbutton {
background: #0ead99;
border-radius: 3px;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 4px 8px;
position: absolute;
right: 20px;
top: 30px;
}

.dlbutton:hover {
background: #0eb49f;
color: #fff;
}

.image-container {
border: 6px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
overflow: hidden;
position: relative;
width: 400px;
}

.image-container img {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}

.image-container:hover img {
-webkit-transform: translateY(-45px);
-moz-transform: translateY(-45px);
-ms-transform: translateY(-45px);
-o-transform: translateY(-45px);
transform: translateY(-45px);
}

.image-container:hover figcaption {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .4s, opacity .1s;
-moz-transition: -moz-transform .4s, opacity .1s;
-ms-transition: -ms-transform .4s, opacity .1s;
-o-transition: -o-transform .4s, opacity .1s;
transition: transform .4s, opacity .1s;
}

.image-container figcaption {
background: #283449;
bottom: 0;
color: #fff;
height: 50px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
-moz-transition: -moz-transform .4s, opacity .1s .3s;
-ms-transition: -ms-transform .4s, opacity .1s .3s;
-o-transition: -o-transform .4s, opacity .1s .3s;
transition: transform .4s, opacity .1s .3s;
width: 360px;
}

Answer 1

您只需要从.image-container中删除margin-left。

.image-container { margin-left:0; }

Answer 2

将containerright（来自CSS）的大小从66％更改为92％。这将使所有div在中心对齐，并且不会干扰页面响应。

Answer 3

卸下：

float: left;
float: right;

他们变得集中。

Answer 4

.containerright {
 height: 312px;
 width: 412px;
 font: 87.5%/1.5em sans-serif !important;
 margin-top:20px;
 display: inline-block;
 text-align:left !important;
 ...
 margin:0 auto; // add this
  }

对其他容器也做同样的事情在中心

无法让这些div成为中心

4 个答案: