CSS画像を中央揃えにする方法-htmlチュートリアル-php.cn

CSS画像を中央揃えにする方法

php中世界最好的语言

リリース： 2018-05-15 14:43:37

オリジナル

8102 人が閲覧しました

画像を中央に表示させる方法はたくさんありますが、最もおすすめなのはCSSを使ってDIVを操作する方法です。そこで、CSSを使った2つの方法を紹介します。画像を中央に配置します。

まず、画像内の DIV

オブジェクトボックスを水平方向の中央に配置します。これは、DIV ボックス内でテキストフォントを水平方向の中央に配置するのと同じ CSS です。

オブジェクトのコンテンツを中央に配置する CSS スタイルの単語は次のとおりです:

text-align
:center

ログイン後にコピー

text-align はオブジェクト内のコンテンツが配置される場所です

属性

center 値は中央に配置されます

1画像を水平方向にラベルオブジェクト内に直接配置します。「align="center"」を追加して、オブジェクト内の画像を水平方向および水平方向の中央に配置します。

「align="center"」をラベルオブジェクトに直接追加して、画像をオブジェクト内の水平方向と水平方向の中央に配置します。

align="center"使用方法：
<p align="center"></p>
align="center"居中图片DIV+CSS实例代码：
<!DOCTYPE > 
<html xmlns="http://www.php.cn"> 
<head> 
<meta charset="utf-8" /> 
<title>图片横向居中</title> 
</head> 
<body> 
<p align="center"><img src="http://www.php.cn" /></p> 
</body> 
</html>

ログイン後にコピー

CSS は、画像内の DIV オブジェクトを水平方向に中央揃えにします

2. CSS スタイルを使用して、画像を DIV 内で中央揃えにします (水平方向に中央揃えにします)

HTML+CSS 完全なコードは次のとおりです:

<!DOCTYPE > 
<html xmlns="http://www.php.cn"> 
<head> 
<meta charset="utf-8" /> 
<title>图片横向居中</title> 
<style> 
.pcss5{text-align:center} 
</style> 
</head> 
<body> 
<p class="pcss5"><img src="http://www.php.cn" /></p> 
</body> 
</html>

ログイン後にコピー

テキストを中央に配置する、画像を中央に配置する、コンテンツを中央に配置するこれを実現するには、上記の 2 つの方法を使用できます。通常は CSS を使用することをお勧めしますが、Web ページでは多くの場合、対応するセレクタースタイルを変更するだけで済みます。 CSS ファイルを使用してコンテンツを中央、左、または右に変更します。

推奨読書:

CSS を使用して円形のプログレスバーを実装する

CSS リップルアニメーション

Web ページが iframe されている場合はどうすればよいですか?

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