Question

我想将三个方框放在这样的中心：https://drive.google.com/file/d/0B4gPO2Q50KsZcGxrbGEySFV5eU0/view?usp=sharing

我想要实现的是在移动设备中一个接一个地显示框，但我不知道该怎么做。

我正在使用此代码：

div#alex_box {
    border: solid 1px #aaa;
    overflow: hidden;
}

div.img_home {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}	

div.img_home img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img_home a:hover img {
    border: 1px solid #0000ff;
}

div.img_desc_home {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}

<div id="alex_box">
<div class="img_home">
    <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/depositphotos_18467679-Travel-car-illustration.jpg" alt="primera imagen"></a>
     <div class="img_desc_home">Texto primera imagen</div>
</div>

<div class="img_home">
    <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/images.jpg" alt="segunda imagen"></a>
     <div class="img_desc_home">Texto segunda imagen</div>
</div>

<div class="img_home">
    <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/bus-icon120413.png" alt="tercera imagen"></a>
    <div class="img_desc_home">Texto tercera imagen</div>
</div>
</div>

Answer 1

尝试此缩小并查看更改Fiddle

@media screen and (max-width: 2000px) and (min-width: 300px){
    img {
        height:100px;
    }
    div#alex_box {
        border: solid 1px #aaa;
        overflow: hidden;
    }
    div.img_home {
        margin: 5px;
        padding: 5px;
        border: 1px solid #0000ff;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }
    div.img_home img {
        display: inline;
        margin: 5px;
        border: 1px solid #ffffff;
    }
    div.img_home a:hover img {
        border: 1px solid #0000ff;
    }
    div.img_desc_home {
        text-align: center;
        font-weight: normal;
        width: 120px;
        margin: 5px;
    }
}

<div id="container">
    <div id="alex_box">
        <div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/depositphotos_18467679-Travel-car-illustration.jpg" alt="primera imagen"></a>

            <div class="img_desc_home">Texto primera imagen</div>
        </div>
        <div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/images.jpg" alt="segunda imagen"></a>

            <div class="img_desc_home">Texto segunda imagen</div>
        </div>
        <div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/bus-icon120413.png" alt="tercera imagen"></a>

            <div class="img_desc_home">Texto tercera imagen</div>
        </div>
    </div>
</div>

Answer 2

您可以使用父div 中的 margin-left: auto;margin-right: auto; 来实现它：

div#alex_box {
    border: solid 1px #aaa;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding:10px;
    display:table;
}

我还将 display:table; 添加到父div ，将 display:table-cell; 添加到每个子div < / strong>，它工作正常，也是响应。

这是the working Fiddle。

编辑：

要使用空格分隔框，您只需将margin:5px;添加到其CSS中：查看this Fiddle。

div内的中心框（图像+文本）

2 个答案: