css - テキストの長さが不明な LI の中央テキスト

Question

順序付けられていないリストに一連のリスト項目を作成しています。リストのサイズは固定です。250px X 75px;これらのリスト項目は動的に生成されるため、どのようなテキストが表示されるかわからないため、私の li は次のようになります。

#pages-content li{
  float: left;
  width: 250px;
  height: 75px;
  margin: 15px;
  vertical-align: middle;
  text-align: center;
}

行の高さを作るという提案が1つ見つかりましたが、75pxそれは複数の行が存在するまで機能しました。

Answer 1

CSS:

#pages-content ul li{
  width: 250px;
  height: 75px;
  text-align: center;
}

HTML:

<div id="pages-content">
    <ul>
        <li>Matter here</li>
    </ul>
</div>

働くフィドル

Answer 2

純粋なHTML/CSSソリューションの場合は、テーブルとvertical-align: middleテーブルセルを使用してみてください。

http://jsfiddle.net/3zLcT/

cssしか使用できない場合は、運が悪いと思います。

Answer 3

リストを使用する必要がありますか? 代わりに div を使用できますか?

<style>
.div { 
  width: 250px; 
  height: 75px; 
  position: relative;
}

.container { 
  position: absolute; 
  width: 250px; 
  height: 75px; 
  display: table; 
}

.container p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}
</style>
<div class="div">
      <div class="container">
          <p>This text should look centered even if it's long.</p>
      </div>
</div>
<div class="div">
      <div class="container">
          <p>This text should look centered even if it's long.</p>
      </div>
</div>
<div class="div">
      <div class="container">
          <p>This text should look centered even if it's long.</p>
      </div>
</div>

Answer 4

display: table-cellテーブルデータの場合、多かれ少なかれ垂直方向の配置が意図されているため、追加は機能する可能性があります