垂直对齐单元格中的文本

Question

是否可以在单元格中对齐文本？

在我的例子中，我想像这样集中小时和城市：

PLUNKER

＆＃13;

＆＃13;

#presentation {
    background-color: #dedede;
    padding-top: 25px;
    padding-left: 50px;
    padding-right: 50px;
}

#offers h1 {
    text-transform: uppercase;
    color: #666666;
}

#offers h1 em {
    color: #4598d1;
    font-style: normal;
}

.offers {
    padding: 25px 50px;
    width: 50%;
    margin: auto;
}

.offers button {
    background-color: #dddddd;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #868686;
    border: #868686;
    border-style: solid;
    border-width: 1px;
}

.offers .right {
    float: right;
    width: 100px;
}

.offers table {
    background-color: #DEDEDE;
    text-align: left;
    float: left;
}

.offers .tittle {
    font-size: 18px;
    color: #666666;
    font-family: 'Arial Normal', 'Arial';
    text-transform: uppercase;
}

.offers th {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-size: 11px;
    white-space: nowrap;
}

.offers table th .fistClass {
    font-family: 'Arial Gras', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 12px;
    color: #669900;
    text-align: center;
}

.offers table .td {
    background-color: #ffffff;

}

.offers .departureTime {
    color: #35A6F4;
    font-size: 18px;
    font-weight: bold;
}

.offers .arrivalTime {
    color: #35A6F4;
    font-size: 11px;
}

.offers .originStation {
    font-family: 'Arial Gras', 'Arial';
    font-weight: bold;
    font-style: normal;
    font-size: 11px;
}

.offers .destinationStation {
    font-family: 'Arial Gras', 'Arial';
    font-style: normal;
    font-size: 11px;
}

.offers .duration {
    font-size: 11px;
    color: #666666;

}

.offers .priceFirstClass {
    color: #7ABB00;
    text-align: right;
    font-family: 'Arial Gras', 'Arial';
    font-weight: bold;
    font-size: 20px;
}

.offers .minPrice {

}

.offers .lastPlaces {

}

.offers .unavailable {
    font-size: 12px;
    color: #E4E4E4;
    text-align: center;
}

.offers .foo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
}

.offers p.espacement_important {
    margin: 5px 0;
}
.offers span{
    padding-left: 15px;
}

＆＃13;

<div id="presentation">
    <section>
        <div class="offers">
            <table border="0">
            <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                  <td>
                        <div>
                            <p>
                            <span class="departureTime">03h00</span>
                             <span>New-York</span>
                            </p>
                             <p>
                                <span class="arrivalTime">15h00</span>
                                <span>Bahamas</span>
                            </p>

                            <p class="duration"><span >8h00</span>
                                <span>2 correspond.</span>
                                <span>A380</span>
                            </p>
                          </div>
                        </td>
                      <td class="unavailable">indisponible</td>

                    <td><input type="radio" />
                        <label >10.00 €</label>
                    </td>
                    <td>
                        <label >50.00 €</label>
                    </td>
                </tr>
            </table>
        </div>
    </section>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试以下代码。

HTML

<div id="presentation">
<section>
    <div class="offers">
        <table class="locationtable" width="100%;" cellpadding="0">
            <tr>
                <td width="50%"><span class="departureTime">03h00</span></td>
                <td width="50%"><span>New-York</span></td>
            </tr>
             <tr>
                <td class="duration">8h00</td>
                <td><span>Bahamas</span></td>
            </tr>

        </table>
    </div>
</section>

CSS

.locationtable{
    width: 200px;
    margin: 0 auto;
    background: #eee;
}
table td{
    padding: 5px 10px;
    vertical-align: middle;
    text-align: center;
}
.departureTime,
.duration{
    color: blue;
}

JSFIDDLE DEMO

Answer 2

您要做的是将文本强制放在一个唯一的行上。 我现在可以想到两个解决方案。

第一个是，将包含文本的单元格赋予最小宽度，该宽度始终允许文本显示在一行上，但是，如果向前创建新的较长工作站名称会怎么样？

第二个解决方案是使用css属性调用＆＃34; white-space＆＃34;强制文本在一行上，并且在表格单元格中，它将自动调整＆＃34; td＆＃34;适合你的文字：

.offers td:first-child p{
    white-space:nowrap;
}