在单元格中垂直对齐文本

Question

Is it possible to align text in a cell?

In my example I want to align hours and city centrally like this:

PLUNKER

 #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; } 

 <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> 

Answer 1

Try below code.

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

What you want to do, is to force the text on a unique line. I can think now of two solutions to proceed so.

The first one, would be to give to the cell that contains your text a minimum width that would always allow the text to display on one line, but, what if a new longer station name is created forward ?

The second solution is to force the text on one line with a css property call "white-space", and, in a table cell it will automatically resize the "td" to fit your text :

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