How to vertically center text images in html

This time I will bring you the text of htmlPicturesHow to vertically center the text and picture of htmlWhat are the precautionsThe following is the actual combat Let’s take a look at the case.

Method 1: Set the box height to be the same as line-height. This method is suitable for a line of text.

Use attributes for vertical centering of pictures and alignment of a line of textvertical-align

Small icons and text are vertically aligned, and small icons are inserted as backgrounds

// attr: Set your own generated attributes, such as selected checked, even if you click it with the mouse, its value is undefined, so it is recommended to use prop

containing block
some for your own properties The calculation of the size and position of an element is often determined by the containing block in which the element is located. The containing block does not specifically refer to an element area, but a visually imaginary area. If you understand it, you can conveniently assign it to the element. To position.
How do you know where the containing block of an element is?

Initial Containing Block
The user agent (such as a browser) selects the root element as the containing block (called the initial containing block). When the child element of html has no other close containing block, it will rely on the initial containing block for positioning.
What is the size of the initial containing block? That is, the viewport size, height will not increase with the increase of html.

Nonabsolutely positioned elements, their containing block consists of the content boundaries of the nearest block-level ancestor element box.
The same goes for floating elements, starting from the content boundary.

The containing block of the absolute element is established by the nearest ancestor whose position is not static
In fact, this is more complicated. You need to consider whether the containing block of the absolute element is created inline or as a block-level element. Inline compatibility is relatively poor, so it is generally avoided to include block-level elements in inline elements, so most contain blocks are created from block-level elements.
Its containing block is formed by the inner boundary of the ancestor's border.

If the element has the attribute 'position:fixed', the containing block is created by the viewport

css image centering is divided into two situations: css image horizontal centering and vertical centering. Sometimes the image needs to be horizontal at the same time. Vertical centering,

The following are divided into several centering situations:

Horizontal centering of css images

1. Use margin: 0 auto to achieve horizontal centering of images

Use margin: 0 auto to center the image is to add css style margin: 0 auto to the image as follows:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" /></div>

2. Use the horizontal centering attribute of the text text-align: center

Code As follows:

<div style="text-align: center; width: 500px; border: green solid 1px;"><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></div>

css image vertical centering

1. Use height == row height to achieve vertical centering of the image

This method can only be used after specifying the height, code As follows:

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" /></div>

2. Use table to achieve vertical centering of images

The method of using table is to use the vertical centering attribute of table. The code is as follows:

Use display: table here ; and display: table-cell; to simulate table. This method is not compatible with IE6/IE7. IE67 does not support display: table. If you do not need to support IE67, you can use

Disadvantages: When you set Display: table; may change your original layout

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">   <span style="display: table-cell; vertical-align: middle; ">
       <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
   </span></div>

3. Use absolute positioning to vertically center the image

If the width and height of the image are known, the code is as follows:

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
    <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /></div>

4. The mobile terminal can use flex layout to achieve vertical centering of css images

The mobile terminal generally has a higher version of the browser, so you can boldly use flex layout (flex layout refers to the flex of css3 Layout usage) The demonstration code is as follows:

css code:

<style type="text/css">
        .ui-flex {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }
        .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
            box-sizing: border-box
        }
        .ui-flex.justify-center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }
        .ui-flex.center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }
    </style>

html code:

<div class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
    <div class="cell">
    <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" />
    </div></div>

I believe you have mastered the method after reading these cases. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

CSS Basic Syntax: Three Introductions of CSS

CSS Layout Box Model Properties

Solution to the gap between the image and view tags

##About the block-level format in CSS

The above is the detailed content of How to vertically center text images in html. For more information, please follow other related articles on the PHP Chinese website!