Html 中心跨距低于另一跨距

Html 中心跨距低于另一跨距,html,css,Html,Css,我下面有两段,都包括3个跨距。 上跨的文字为“Auftrag 1-3”,下跨的文字为“下载” 我希望底部跨度(下载)直接居中于“Auftrag 1-3”下方 现在只有中间的一个完全居中,如果你不理解上面的文字,你可以看一看 #内容1 p{ 文本对齐:居中; 字体系列:“蒙特塞拉特”,无衬线; 字体大小:粗体; 字体大小:xx大号; } #内容1.顶部{ 背景:rgb(11,81,146); 右边距:15px; 填充:15px; 颜色:白色; } #内容1.底部{ 背景:#d6; 填充:15px

我下面有两段,都包括3个跨距。 上跨的文字为“Auftrag 1-3”,下跨的文字为“下载”

我希望底部跨度(下载)直接居中于“Auftrag 1-3”下方

现在只有中间的一个完全居中,如果你不理解上面的文字,你可以看一看

#内容1 p{
文本对齐:居中;
字体系列:“蒙特塞拉特”,无衬线;
字体大小:粗体;
字体大小:xx大号;
}
#内容1.顶部{
背景:rgb(11,81,146);
右边距:15px;
填充:15px;
颜色:白色;
}
#内容1.底部{
背景:#d6;
填充:15px;
右边距:15px;
颜色:白色;
}


奥夫特拉格1
奥夫特拉格2
奥夫特拉格3

下载 下载 下载


使用表格,而不是
标签。表格是迄今为止最短、最清晰的方法

td{
文本对齐:居中;
}

奥夫特拉格1
奥夫特拉格2
奥夫特拉格3
下载
下载
下载

最好将按钮分隔成各自的div,如果希望元素保持居中,请确保两侧都留有边距。如果只希望文本居中
文本对齐:居中将使元素的内容居中

.container{
显示器:flex;
}
.集装箱基站{
利润率:15px;
}
.顶{
文本对齐:居中;
背景:#ccc;
填充:10px;
}
.底部{
文本对齐:居中;
背景:蓝色;
颜色:#fff;
填充:10px;
}

奥夫特拉格1
下载
奥夫特拉格3
下载
奥夫特拉格2
下载

Auftrag1
Auftrag2
Download
这样的代码为什么没有?看起来我无法在这些行之间获得边距或填充?我已经添加了一个包含“')的跨距,并将其涂成白色以获得一个不可见的跨距,但我是否也可以在“Auftrag 1”和“Auftrag 2”之间添加一个跨距?@Lars表中的元素可以设置为任何其他框布局元素的样式。@StephenReppik否,表单元格的样式不能设置为任何其他框布局元素。也就是说,margin不起作用,所以在两个单元格之间创建一个间隙需要一些跨浏览器可能不起作用的技巧。@LGSon我们已经有了flexbox的答案。你可以把它投上去,而不是发布一个新的。