Вертикальное выравнивание текста в ячейке

Question

Можно ли выровнять текст в ячейке?

В моем примере я хочу, чтобы выровнять часы и город в центре, как это:

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

Попробуйте ниже код.

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 собственности вызова «белого пространства», и, в ячейке таблицы будет автоматически изменять размер «ТД», чтобы соответствовать текст:

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