CSSで画像や文字を縦方向に中央揃えにする方法は何ですか?

私たちが仕事をするとき、レイアウトに写真とテキストをよく使いますが、注意深い友人ならわかるでしょうが、HTML はデフォルトで写真が上部に、テキストが下部に配置されるため、画像が高くテキストが低い場合は、配置することができません。中心にあります。ページを美しくするために、画像とテキストの配置を設定することに慣れています では、CSS でテキストと画像の垂直方向の中央揃えを設定するにはどうすればよいでしょうか? テキストや画像を垂直方向の中央揃えにする方法は何ですか?

方法 1: シンプルで大雑把な方法。CSS 属性vertical-align: middle を直接使用します。コードは次のとおりです:

<img  src="/static/imghw/default1.png"  data-src="img/second_logo.png"  class="lazy"     style="max-width:90%"/ alt="CSSで画像や文字を縦方向に中央揃えにする方法は何ですか?" ><a href="#">哈哈哈</a>

レンダリング:

方法 2: 画像が背景画像を介して追加されます。はい、背景、line-height=height 設定を使用して、テキストと画像の垂直方向の中央揃えを実現できます。コードは次のとおりです:

HTML 部分:

<div class="aa">
   <a href="">哎呦呦</a>
</div>

CSS 部分:

.aa{
       width: 200px;
       height: 100px;
       line-height: 100px;          
       background: url(img/pic4.png) no-repeat left center;          
      }
.aa a{padding-left: 80px;}

レンダリング:

方法 3: 画像とテキストが 2 つの異なる div に配置されている場合、次を表示できます: inline - block とvertical-align: middle は、画像とテキストを垂直方向に中央揃えに設定します。 コードは次のとおりです:

HTML 部分:

<div>
    <div class="aa"><img  src="/static/imghw/default1.png"  data-src="img/pic1.png"  class="lazy"   alt="CSSで画像や文字を縦方向に中央揃えにする方法は何ですか?" ></div>
    <div class="bb"><a href="">啦啦啦</a></div>
</div>

CSS 部分:

.aa{
    display: inline-block;
    vertical-align: middle;
    }
 .bb{
     display: inline-block;
     }

レンダリング:

概要: 上記は次のようになります。画像やテキストを垂直方向に中央に配置する方法は、ページ レイアウトによって異なります。このチュートリアルが役立つことを願っています。

以上がCSSで画像や文字を縦方向に中央揃えにする方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。