如何将2个或更多div放在同一行上？ （css）

Question

我有一个小问题与CSS居中：/
我有2个或更多的div在同一行，我会他们的宽度是相等的彼此。 因此，如果有2个div，那么1.和2. div必须具有相同的面积（50％和50％），这些div应居中。

我有一个代码在下面，但它不工作。

<div class="main"> 
    <div class="xy">First</div> 
    <div class="xy">Second</div> 
</div> 

CSS：

.xy { 
    display: inline; 
    margin: auto; 
} 
.main { 
    height: 100%; 
    width: 100%; 
    background-color: #c0c0c0; 
} 

Answer 1

一个简单的解决方案是使用display: table和display: table-cell，如：

.xy { 
 
    display: table-cell;/*set display to table-cell*/ 
 
    width: 50%;/*set the width to 50%*/ 
 
} 
 
.main { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #c0c0c0; 
 
    display: table;/*set display to table*/ 
 
}

<div class="main"> 
 
    <div class="xy">First</div> 
 
    <div class="xy">Second</div> 
 
</div>

如果你想要的文字是中心也可以加text-align: center在.xy：

.xy { 
 
    display: table-cell; 
 
    width: 50%; 
 
    text-align: center;/*add text-align center*/ 
 
} 
 
.main { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #c0c0c0; 
 
    display: table; 
 
}

<div class="main"> 
 
    <div class="xy">First</div> 
 
    <div class="xy">Second</div> 
 
</div>

Answer 2

.xy { 
    display: inline-block; 
    margin: auto; 
    widht: 50% 
} 

切换到内联块，并给它以％的宽度。