複数の<p>タグを縦中央揃えするやり方を教えて下さい

Question

<div>
	<ul>
		<li>
			<p>テキスト１</p>
			<p>テキスト２</p>
		</li>
		<li>
			<p>テキスト１</p>
            <p>テキスト２</p>
		</li>
		<li>
			<p>テキスト１</p>
			<p>テキスト２</p>
		</li>
	</ul>
</div>

ul {
  height: 55px;
}
li {
  float: left;
 display: table-cell;
  vertical-align: middle;
}

質問をご覧頂きありがとうございます。

画像の様に作りたいたのですが、
上記のコードで試したのですがうまくいきません。

<ul>の中の複数の<p>が入った<li>を縦中央揃えするやり方を教えて下さい。 初歩的な質問かもしれませんがどうかよろしくお願い致します。

Answer 1

図に似せてコーディングしてみました。こんな感じでしょうか。

* {
    /*以下はリセットなので無くてもよい*/
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}
ul {
  height: 55px;
  /*あとに続く子要素liをセルとして動かす為table指定が必要*/
  display: table;
}
li {
  /*擬似テーブルで回り込みは必要ない*/
  display: table-cell;
  vertical-align: middle;
  /*擬似テーブルもマージンは効かない*/
  padding: 0 20px 0 0;
}
p {
  text-align: center;
}

コーディングテストサイト：http://codepen.io/