css表横居中,HTML，CSS —如何将两个表并排水平居中

4 个答案:

答案 0 :(得分：2)

您可以在容器div上使用flexbox，应用justify-content: center;将其居中，删除浮点，并在其中一张表上使用边距在它们之间建立距离。

.wrap {

display: flex;

align-items: center;

justify-content: center;

}

table {

border: 1px solid #555;

}

abc

xyz

xyz

xyz

答案 1 :(得分：1)

使用弹性框。

.container {

display: flex;

align-items: center;

justify-content: space-between;

}

table {

background: red;

}

abc

xyz

xyz

xyz

xyz

xyz

答案 2 :(得分：0)

您应该考虑使用一张有一行和两列的表。如果它不符合您的要求，则可以通过以下几种方法进行：

使用弹性盒(推荐)

.wrapper {

display: flex;

justify-content: space-between;

align-items: center;

}

table {

width: 100%;

border: 1px solid #000;

text-align: center;

}

table:first-child {

margin-right: 10px;

}

Table 1 - Column 1Table 1 - Column 2

firstsecond

Table 2 - Column 1Table 2 - Column 2

firstsecond

使用内联块

table {

display: inline-block;

border: 1px solid #000;

text-align: center;

}

table:first-child {

margin-right: 10px;

}

Table 1 - Column 1Table 1 - Column 2

firstsecond

Table 2 - Column 1Table 2 - Column 2

firstsecond

以此类推...

答案 3 :(得分：0)

是。

abc

xyz

在此处输入代码