CSS image size is not fixed in the center method

CSS is the front-end development of a necessary language, this article mainly introduces the CSS Center instance of the size of the image center method, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

1. Use Table-cell to achieve vertical centering

<p class= "Box1" >    [off-site picture ... (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 for the Display:table-cell type to be vertically centered, and the table's vertically centered property in the Ie8+ browser.

Note: Img{vertical-align:middle;} Just to eliminate baseline alignment issues for the Display:inline-block type.

2. Vertical centering method of multiline text

Sometimes we may encounter situations that require multiple lines of text to be centered vertically, but sometimes it can be a bit of a hassle, and we need to change our mind to achieve it.

<p class= "Box3" > <span> Hello, I'm the test data hello, I am the test data Hello, I am the test data hello, I am test data Hello, I am the test data Hello, I am the test data Hello,    I'm the test data hello, I am the test data Hello, I am the test data Hello, I am the test data Hello, I am the test data Hello, I am the test data Hello, I am the test data Hello, I am the test data Hello, I am the test data Hello, I am the test data hi, I am testing the statistics </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 a span tag (or other labels), set the span tag to Inline-block, and then center the image vertically (ie8+).