CSS image centering method with variable size

CSS is an indispensable language for front-end development. This article mainly introduces the CSS centering example of the image centering method with a variable size. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Use table-cell to achieve vertical centering

##

<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;
}

Use the parent element to implement vertical centering for the display:table-cell type. The table has the vertical centering attribute that comes with the IE8+ browser.

Note: img{vertical-align: middle;} is just to eliminate the baseline alignment problem of display:inline-block type.

2. Vertical centering method of multi-line text

Sometimes we may encounter situations where multi-line text needs to be vertically centered, but Sometimes it is a bit troublesome to do, and we need to change our thinking to achieve it.

<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;
}

Wrap the internal text with span tags (other tags are also acceptable) and set the span tag to inline-block , and then process it when the image is vertically centered (ie8+).

Related recommendations:

Three ways to center images with CSS

How to center text and images in HTML code?

How to center the css image

The above is the detailed content of CSS image centering method with variable size. For more information, please follow other related articles on the PHP Chinese website!