在 div 内居中框（图像+文本）答案

【问题标题】：Centering boxes inside a div (image+text)在 div 内居中框（图像+文本）
【发布时间】：2015-01-21 08:41:45
【问题描述】：

我想像这样将三个框居中：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>

【问题讨论】：

我想要实现的是在移动设备上一个接一个地显示这些框，但我不知道该怎么做。 - 使用media querys。跨度>
@Vucko 说的差不多。从外观上看，图像的属性很好，但为什么你不能看到它们彼此重叠是因为它们包含的 div 大小不会随屏幕而变化。所以添加一个媒体查询来定义包含 div 的大小，你应该是金色的

标签： html css

【解决方案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>

【讨论】：

@KyleT 是的，你是对的............我用 chrome 移动视图对其进行了测试，效果很好
我一定是不小心删除了我的评论....奇怪哈哈反正我使用代码 sn-p 中的整页选项测试了您的解决方案，它似乎与 OP 的工作方式相似。只是提醒一下重构你的答案:)
我目前在 Firefox 中进行测试，浏览器之间总是有问题，对吧？
@KyleT 是的，我在 chrome 移动视图中进行了测试。它显示的结果几乎与手机一样

【解决方案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;
}

我还为每个子div添加了display:table;到父div和display:table-cell;，它工作正常，而且反应灵敏。

这是the working Fiddle。

编辑：

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

【讨论】：

嘿Chsdk，谢谢！您将如何在框之间添加空格？ rgds
@Alex 只需将 margin:5px; 添加到 box 类中，请参阅我的 EDIT 中的 Fiddle。