☰

div内のテキストを垂直に揃える [重複] 質問する

tag-icon • tag-icon css vertical-alignment
div内のテキストを垂直に揃える [重複] 質問する

以下のコード（JS Fiddleのデモdiv) では、テキストが中央に配置されないので、理想的には中央に配置されません。 属性を使用しても、内のテキストを垂直方向に中央揃えする方法が見つかりませんmargin-top。どうすればいいでしょうか?

<div id="column-content">
    <img src="https://i.sstatic.net/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}
    
#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

ベストアンサー1

Andres Ilich の言うことは正しい。誰かが彼のコメントを見逃した場合に備えて...

A.) テキストが 1 行しかない場合:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}
<div>vertically centered text</div>

B.) テキストが複数行ある場合:

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}
<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>

おすすめ記事