ホームページ > 記事 > ウェブフロントエンド > CSSで写真を縦方向に中央揃えにする方法
CSSで写真を縦方向に中央揃えにする方法
- WBOYオリジナル
- 2021-12-02 17:15:158006ブラウズ
方法: 1. 写真要素の親要素に相対位置スタイルを追加し、写真要素に絶対位置スタイルを追加します; 2. top 属性と "margin-top" 属性を使用して設定します写真を垂直方向の中央に配置するには、写真に「top:50%;margin-top:top margin value;」スタイルを要素に追加するだけです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#css を使用して写真を垂直方向の中央に配置する方法
絶対位置を使用して垂直方向の中央揃えを実現します1. imgの親要素であるimage img要素に相対位置属性（position:relative）を追加すると同時に、子要素であるimage img要素に絶対位置属性（position:absolute）を追加します。 2. Picture要素のtop属性を50%に設定します。 3. ここで、img 要素に負の margin-top 値を設定する必要があります。この値は、垂直方向の中央に配置する要素の高さの半分です。要素では、margin. -top を使用できません。代わりに、transform:translateY(-50%); 属性を使用します。 覚えておいてください: 同時に水平方向の中央揃えをしたい場合は、垂直方向の中央揃えに使用するのと同じテクニックを使用して行うことができます。 例は次のとおりです:<html>
<head>
<style type="text/css">
.posdiv{
width: 300px;
height: 250px;
position: relative;
border:1px solid red;
}
.posdiv img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="posdiv">
<img src="1118.02.png" alt="">
</div>
</body>
</html>出力結果: 
##(学習ビデオ共有:
以上がCSSで写真を縦方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。