可変サイズの CSS 画像の中央揃え方法

CSS はフロントエンド開発に欠かせない言語です。この記事では主に、可変サイズの画像を中心に配置する方法の CSS の例を紹介します。参照。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. table-cell を使用して垂直方向の中央揃えを実現します

<p class="box1">
    [站外图片上传中……(5)]
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

親要素を使用して、ie8+ ブラウザーに付属している display:table-cell タイプのテーブルの垂直方向の中央揃えを実装します。垂直方向に中央揃えのプロパティ。

注: img{vertical-align: middle;} は、display:inline-block タイプのベースライン位置合わせの問題を排除するためのものです。

2. 複数行のテキストを縦方向に中央揃えにする方法

複数行のテキストを縦方向に中央揃えにする必要がある場合に、それを行うのが面倒な場合があり、考え方を変える必要があります。それを達成するために。

<p class="box3">
    <span>你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据</span>
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

内部テキストをspanタグで囲み(他のタグも使用可能)、spanタグをinline-blockに設定し、画像を垂直方向に中央揃えにします(ie8+)。

関連する推奨事項:

CSS で画像を中央に配置する 3 つの方法

HTML コードを使用してテキストと画像を中央に配置するにはどうすればよいですか?

CSS画像を中央に配置する方法

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