［css］absolute + vertical-align + table-cell

absoluteブロックにtable-cellは効かないため、

・HTML

<ul>
<li>hogehoe</li>
</ul>

・CSS

ul {display:tabel;
width:500px;
height:500px;}</pre>
li {position:absolute;
top:20px;
left:20px;
width:200px;
height:50px;
vertical-align:middle;}

↑みたいなことをやりたい時は一回要素を咬ませるとうまくいったりする

・HTML

<ul>
<li>
<div>hogehoge</div>
</li>
</ul>

・CSS

ul {width:500px;
height:500px;}
li {position:absolute;
display:tabel;
top:20px;
left:20px;
}
div {
display:table-cell;
width:200px;
height:50px;
vertical-align:middle;

Similar Projects

  • ［photoshop］スマートオブジェクト（AI）をワープさせる

    イラストレーターから引っ張ってきたスマートオブジェクトを command + T などで自由変型をさせようとしても角選択で平行に動いてしまう。 ラスタライズさせれば勿論変型できるけど、 そうすると修正がきかない一発データ […]

  • ［EC-CUBE］受注管理CSVに顧客情報追加

    dtb_csvにテーブル追加 csv_id→3 に（受注管理に該当） col に dtb_customer.○○（該当ID）　dtb.customerから○○というIDを読み込み disp_name に　表示したい名称 […]

  • sshで一気にお引っ越し

    ①ターミナルを起動→ログイン 1.ログイン ssh hogehoge(アカウントID)@hogehoge.hoge.hoge(サーバ名)　改行 新規の場合は Are you sure you want to contin […]

  • ［MAMP］［wordpress］ローカルから本番サーバーへアップ

    <h3前提 ローカル（MAMP）にwordpressを「wordpress」等のディレクトリ内にインストールしている。 ローカルにてすべての記事、画像、投稿が済んでいる 本番サーバはroot（www）直下にword […]

  • DBのお引越

    1. ○phpmyadminでエクスポート 圧縮 sqlで。 その際に50000から300に設定変更 2. ○BigDumpインストール bigdump.phpを必要情報を入れて、適当なディレクトリにアップ 3. ○アッ […]

  • ダウンロードテスト
  • ［illustrator］スポイトでアピアランスコピーの方法

    デフォルトではコピーできない仕様。 ただし、方法は簡単。 1.スポイトツールを選択 2.何も選択してない状態で”enter” 3.「アピアランス」にチェック 以上。

  • ブラウザ内でダウンロード禁止PDFをacrobatで表示

    まずはじめに、 ブラウザ内のacrobatにて開く必要があります。 windows版 ie Internet Explorer で PDF ファイルを表示するための設定について（Windows 版 Acrobat 8/A […]

  • ［css］absolute + vertical-align + table-cell

    absoluteブロックにtable-cellは効かないため、 ・HTML ・CSS ↑みたいなことをやりたい時は一回要素を咬ませるとうまくいったりする ・HTML ・CSS