Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html div内的对中框(图像和文本)_Html_Css - Fatal编程技术网

Html div内的对中框(图像和文本)

Html div内的对中框(图像和文本),html,css,Html,Css,我想把这三个盒子放在中间: 我想实现的是在移动设备中一个接一个地显示盒子,但我不知道如何做到这一点 我正在使用以下代码: div#alex#u盒{ 边框:实心1px#aaa; 溢出:隐藏; } 伊姆古之家分区{ 保证金:5px; 填充物:5px; 边框:1px实心#0000ff; 高度:自动; 宽度:自动; 浮动:左; 文本对齐:居中; } 部门img_家庭img{ 显示:内联; 保证金:5px; 边框:1px实心#ffffff; } 俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰

我想把这三个盒子放在中间:

我想实现的是在移动设备中一个接一个地显示盒子,但我不知道如何做到这一点

我正在使用以下代码:

div#alex#u盒{
边框:实心1px#aaa;
溢出:隐藏;
}
伊姆古之家分区{
保证金:5px;
填充物:5px;
边框:1px实心#0000ff;
高度:自动;
宽度:自动;
浮动:左;
文本对齐:居中;
}	
部门img_家庭img{
显示:内联;
保证金:5px;
边框:1px实心#ffffff;
}
俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰{
边框:1px实心#0000ff;
}
分区img_描述_主页{
文本对齐:居中;
字体大小:正常;
宽度:120px;
保证金:5px;
}

原始图像文本
塞贡达图片
特塞拉图片

尝试缩小和缩小以查看更改

@媒体屏幕和(最大宽度:2000px)和(最小宽度:300px){
img{
高度:100px;
}
亚历克斯包厢{
边框:实心1px#aaa;
溢出:隐藏;
}
伊姆古之家分区{
保证金:5px;
填充物:5px;
边框:1px实心#0000ff;
高度:自动;
宽度:自动;
浮动:左;
文本对齐:居中;
}
部门img_家庭img{
显示:内联;
保证金:5px;
边框:1px实心#ffffff;
}
俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰{
边框:1px实心#0000ff;
}
分区img_描述_主页{
文本对齐:居中;
字体大小:正常;
宽度:120px;
保证金:5px;
}
}

原始图像文本
塞贡达图片
特塞拉图片

您可以使用
左边距:自动;右边距:自动父div中编码>

div#alex_box {
    border: solid 1px #aaa;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding:10px;
    display:table;
}
我还添加了
显示:table父div
显示:表格单元格每个子div编码>,它工作正常,响应速度也很快

这是

编辑:


要用空格分隔框,只需添加
margin:5px到他们的CSS:看一看。

我想实现的是在移动设备中一个接一个地显示框,但我不知道如何做到。-使用
媒体查询
。与@Vucko所说的差不多。从外观上看,图像的属性很好,但为什么不能看到它们彼此重叠,是因为它们的包含div大小不随屏幕变化。因此,添加一个定义包含div的大小的媒体查询,您应该golden@KyleT是的,你是对的……我用chrome mobile view对它进行了测试,效果很好。我一定是无意中删除了我的评论。。。。奇怪的哈哈,不管怎样,我在你的代码片段中使用了完整页面选项测试了你的解决方案,它的工作原理似乎与OP的类似。我现在在Firefox中测试,浏览器之间总是有问题,对吗?@KyleT yes我在chrome mobile view中测试过。它显示的结果几乎与mobilesHey Chsdk相同,谢谢!如何在方框之间添加空格?rgds@Alex只需添加
边距:5px
要创建Box类,请参见“我的编辑”中的小提琴。