横並びのリスト
思いつくものとかこれ作るのになんか苦労したっぽい的な

リストその１

条件としては

1. 横並びである
2. 天地中央で、文字数は未定
3. 高さも揃えてほしい
4. クリッカブルエリアは各要素全体をおおう感じ

hmtl

<ul class="cf floatList-a">
  <li><a href="javascript:void(0);" class="innerText"><span>とても<br>すごい<br>リスト１</span></a></li>
  <li><span class="innerText"><span>リスト２</span></span></li>
  <li><a href="javascript:void(0);" class="innerText"><span>こーしー<br>こーひー<br>ううううあああ<br>ぬｈどｄじぇううぇいｐｆ<br>ぺぺぺ<br>ぺぺぺ<br>ぺぺぺ<br></span></a></li>
  <li><span class="innerText"><span>リスト４</span></span></li>
  <li><a href="javascript:void(0);" class="innerText"><span>リスト４</span></a></li>
</ul>

css

.floatList-a{
  width: 100%;
  height: 100%;
  display: table;
}
  .floatList-a li{
    border-right: 1px solid #dddddd;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    width: 20%;/* 幅は固定pxでも全然OK */
    padding: 0;
    box-sizing:border-box;
  }
  .floatList-a:first-child li:first-child{
    border-left: 1px #ddd solid;
  }
    .floatList-a li .innerText{
      box-sizing: border-box;
      display: table;
      height: 100%;
      padding: 0 10px;
      text-align: center;
      vertical-align: middle;
      width: 100%;
    }
      .floatList-a li .innerText span{
        display: table-cell;
        height: 120px;/* ここは今回は固定 */
        vertical-align: middle;
      }

メモ

天地中央はやっぱし鬼門。
今回は一旦固定にしたけど、完全に動的で高さばらばらになる場合は
やっぱJSで高さを固定しなおす必要があるようですね。
まぁ、ヘッダメニューとかで使う形っぽいので、高さに関してはほぼほぼ固定だろうと思いますが・・・
heightLine.jsとか使うとレスポンシブでも合わせてくれるのでラクにいけるんじゃないかと思います。
まぁ、デモのように縦にまぬけに長いのはそうそうないやろｗｗｗ

リストその２

条件としては

1. 横並びである
2. 画像が上、下はテキスト
3. テキストのツラとケツは高さ合わせてほしい
4. レスポンシブ風に

幅を%指定とする場合

各要素の幅を%で指定した場合はこんな感じ。
レスポンシブみたいに画面を狭めると要素もそれに沿って小さくなる感じのやつです
ちなみに画像のアス比はすべて同じです。

hmtl

<ul class="cf floatList-b">
  <li>
    <dl>
      <dt><img src="/common/img/illust/46.jpg" alt="" width="400" height="400"></dt>
      <dd>テキストテキストテキストテキストテキスト！！<br>テキスト！？<br>テキストォ・・・！</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><img src="/common/img/illust/50.jpg" alt="" width="800" height="800"></dt>
      <dd>テキストテキストテキスト！！！</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><img src="/common/img/illust/51.jpg" alt="" width="650" height="650"></dt>
      <dd>テキストｗｗｗ</dd>
    </dl>
  </li>
</ul>

css

.floatList-b{
  width: 100%;
  height: 100%;
  display: table;
  border: 1px solid #dddddd;
}
  .floatList-b li{
    height: 100%;
    vertical-align: top;
    width: 33.33%;
    padding: 0;
    box-sizing:border-box;
    display: table-cell;
  }
    .floatList-b li dl{
      display: table;
      height: 100%;
    }
      .floatList-b li dl dt{
        display: table-row;
      }
        .floatList-b li dl dt img{
          width: 100%;
          height: auto;
        }
      .floatList-b li dl dd{
        border-left: 1px #ddd solid;
        display: table-cell;
        height: 100%;
        padding: 15px;
        box-sizing:border-box;
      }
      .floatList-b li:first-child dl dd{
        border-left: 0;
      }

リストその２-２

画像のアス比だって合っていない子もいるんですよ！！！！
そんな時どうしましょうかね。リストその２を少しいじってみましょう。

メモ

正直な話、画像の高さが違う状態でテキストのツラを合わせるのは無理です。
なので、こいつはJSを使って常に一番高い画像の高さに合わせるように監視してます。
ちなみに、小さい画像の上下中央に関しては、dt内にspanをいれ、spanをtable-cell化しています。
topで合わせていて良い場合は、span記述は必要ありません。

hmtl

<ul class="cf floatList-c">
  <li>
    <dl>
      <dt>
        <span>
          <img src="/common/img/illust/46.jpg" alt="" width="800" height="800">
        </span>
      </dt>
      <dd>テキストテキストテキストテキストテキスト！！<br>テキスト！？<br>テキストォ・・・！</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>
        <span>
          <img src="/common/img/illust/69_60.jpg" alt="" width="492" height="302">
        </span>
      </dt>
      <dd>これだけアス比違う</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>
        <span>
          <img src="/common/img/illust/51.jpg" alt="" width="800" height="800">
        </span>
      </dt>
      <dd>テキストｗｗｗ</dd>
    </dl>
  </li>
</ul>

css

.floatList-c{
  width: 100%;
  height: 100%;
  display: table;
  border: 1px solid #dddddd;
}
  .floatList-c li{
    height: 100%;
    vertical-align: top;
    width: 33.33%;
    padding: 0;
    box-sizing:border-box;
    display: table-cell;
  }
    .floatList-c li dl{
      display: table;
      height: 100%;
    }
      .floatList-c li dl dt{
        display: table-row;
      }
        .floatList-c li dl dt span{
          display: table-cell;
          vertical-align: middle;
        }
        .floatList-c li dl dt img{
          width: 100%;
          height: auto;
        }
      .floatList-c li dl dd{
        border-left: 1px #ddd solid;
        display: table-cell;
        height: 100%;
        padding: 15px;
        box-sizing:border-box;
      }
      .floatList-c li:first-child dl dd{
        border-left: 0;
      }

js

function floatList_cHeightSet(){
  var floatList_c_li_elem = $('.floatList-c').children('li');
      floatList_c_li_leng = floatList_c_li_elem.length;
      floatList_c_li_img_height = 0;
  for (var i = 0; i < floatList_c_li_leng; i++) 
  {
    if(floatList_c_li_img_height < floatList_c_li_elem.eq(i).find('img').outerHeight())
    {
      floatList_c_li_img_height = floatList_c_li_elem.eq(i).find('img').outerHeight();
    }
  };
  floatList_c_li_elem.find('dt').css('height',floatList_c_li_img_height+'px');
}

floatList_cHeightSet();

$(window).on('resize',function(){
  floatList_cHeightSet();
})

リストその２-３

画像のアス比違うけどさ、縮小じゃなくてほら、その画像の中央に持っていって、はみ出した所は見えないようにしたいんだけど
みたいなちょっと意味わかんない場合もあると思います。
うるせぇ！画像作り直せ！