Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "CSS layout text and picture row method", in the daily operation, I believe that many people have doubts on the method of CSS layout text and picture arrangement. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "CSS layout text and picture arrangement method". Next, please follow the editor to study!

When the calligraphy and the picture are vertically centered in the same row when the equipment is not set, the CSS instance picture is as follows:

Clarify:

The above "css5.com.cn" is the CSS5 website picture, followed by the pen and ink section, it can be seen that although the picture is in the line with the pen and ink, but the pen and ink is not vertically centered, it is obvious that the picture is vertically above, and the pen and ink is vertically below.

The DIV+CSS instance code is as follows:

DIV+CSS instance Teaching Test body {font-size:12px;}

CSS5 Test text CSS

First of all, we configure the text css in the body of this page as 12px. Then introduce the image in html (reduction: CSS introduces-CSS reference) and several test pen and ink after the image. You can either copy the above code to create a new html page, and then dabble in the dabble in the new page, which will look like the picture above.

Set css to make calligraphy and pictures in the same row vertical center we only care about the CSS colors, see CSS code as follows: img {vertical-align:middle;} add the above to the picture configuration bump center CSS format to make the text and pictures in the same row vertically centered.

The incomplete DIV+CSS code is as follows:

CSS example Teaching Test body {font-size:12px;} img {vertical-align:middle;}

CSS5 test text

This page browses the pattern diagram in the reader:

We can either examine the above picture or copy the above broken css code and html source code (source code) easily and actively by ourselves to achieve and master the css high and low vertical center strategy.

DIV CSS wrinkles and progress if we configure the height of ".yangshi" and line-height, we can configure vertical-align:middle if we want to center the pattern vertically in this DIV, CSS code is as follows: .yangshi img {vertical-align:middle;} what is worth mentioning here is that the height and line-height may not be greater than the picture height, otherwise "CSS HACK" will also emerge in different hunting devices.

At this point, the study of "CSS layout text and picture layout method" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.