li要素内のaタグについて
-
サイドバーにウィジェットを使って、最近の投稿を画像とタイトルを表示させています。li要素内にaタグが入っています。
この時、画像に対してテキストが上の方になってしまいます。おそらくli要素の箱上部に表示されるためだと思います。これを縦中央に位置揃えをしたいと考えています。
margin-top padding-top, vertical-alignは試してみましたが変化がないです。だれかこれと同じ体験に直面したかた、分かるかたいらっしゃったら教えてくれると助かります。
-
liタグ内のaタグ内のテキストを縦に中央揃えしたい。ということでよろしいでしょうか。
その場合、
現在は<p><a>テキスト<img></a></p>と言った形でhtmlが作成されていると思いますが、
<p><a><span>テキスト</span><img></a></p>という形にし、
a要素にwidthとheight, position:absoluteを加え、spanタグを中央揃えするという方法がベターかと思います。
以下に実際のサンプルを貼っておきます。https://gist.github.com/potato4d/16dc80dee2ef7996a901
また、実際の表示確認はここからDLし、中に入っているhtmlをブラウザで表示してみてください。
https://gist.github.com/potato4d/16dc80dee2ef7996a901/archive/530b9cb5cde98276d7b24e233b9e7baaff3a07c4.zip早速の返信ありがとうございます。
ご指摘していただいた通りに、試したら確かに動きました。ブロック要素に変えてポジションで位置を指定してあげているという事ですよね。しかし、a要素が重なってしまいました。おそらく原因は、スパンにspanに同じclassがふられているからだと思います。何か解決策が考えられますか?
WordpressはまだPHPの理解が浅いので、classがどのように出力されるのか分かりません。実際のサイトを見たいです。
支障なければ、URL掲載していただければ。。。
トピック「li要素内のaタグについて」には新たに返信することはできません。