css - 単一行および複数行のテキストを中央揃えにする方法
过去多啦不再A梦
过去多啦不再A梦 2017-05-16 13:26:34
0
8
1808

写真に示すように、

テキストが 1 行の場合、テキストは垂直方向に中央揃えになります。 テキストが 2 行ある場合、テキストも垂直方向に中央揃えになります。

追記: 体を曲げる必要はありません。

过去多啦不再A梦
过去多啦不再A梦

全員に返信(8)
洪涛

最初にレンダリングを見てください

次にコードの実装です

リーリー
いいねを押す +0
大家讲道理

レイアウトから判断すると、次のようになります。左側のテキストと右側の時刻が両方とも垂直方向の中央に配置されます。
簡単な方法は次のとおりです:
layout:<p><span>gfghghg</span><span>2017-12<s/pan></p>
css:
p{display:table ;}
スパン{表示: テーブルセル; 垂直方向に配置: 中央;}

お試しいただけます

いいねを押す +0
Ty80

さまざまなソリューションとポータルが含まれています

いいねを押す +0
PHPzhong

リーリー

いいねを押す +0
巴扎黑

<p class="" style="display: table;height: 100px;">

リーリー
いいねを押す +0
过去多啦不再A梦

リーリー リーリー

いいねを押す +0
仅有的幸福

あなたが提供した図によると、各コンテンツの高さは固定されているため、最も外側の親要素の行の高さを独自の高さでのpタグの表示に設定します。コード構造
リーリー

いいねを押す +0
给我你的怀抱

私がまとめたこれらの方法をご覧ください。ポータル
被験者が必要としているのは、複数行のテキストを垂直方向に中央揃えにする方法です。私がまとめた記事には、これを実現するための代表的な方法が含まれています。例は次のとおりです。
http://codepen.io/zengkan0703...
私の回答が気に入らなかったのは質問者さんだったのでしょうか?もしそうなら、その理由を答えていただければ幸いです。そうでない場合は、上記の例でニーズが解決されるはずです。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート