How to align images and text vertically in css

Css method to align images and text vertically in the center: This can be achieved through flex layout, such as [display: -webkit-flex;]. Flex layout is elastic layout, which is used to provide maximum flexibility for box-shaped models. Any container can be designated as a flex layout.

#You can use flex layout to achieve centering (simpler, does not support IE9).

(Learning video recommendation: css video tutorial)

Flex is the abbreviation of Flexible Box, which means "elastic layout" and is used to provide the largest possible layout for box-shaped models. flexibility.

Any container can be designated as Flex layout.

.box
{
  display: flex;
}

Inline elements can also use Flex layout.

.box
{
  display: inline-flex;
}

Browsers with Webkit core must add the -webkit prefix.

.box
{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Note that after setting to Flex layout, the float, clear and vertical-align attributes of child elements will be invalid.

HTML is as follows:

<div class="box">
　　<span>span多行居中测试<br>span多行居中测试<br>span多行居中测试</span>
　　<p>p另一个段落元素</p>
</div>

css

.box{
    display: flex;
    width: 500px;
    height: 300px;
    margin: 50px auto;
    border: 2px solid #000;
    align-items: center;/*副轴居中*/
}
.box span{/*span是另一个flex布局容器，它本身将自适应填满除p元素外的宽度*/
    flex: 1;
    display: flex;
    justify-content: center;/*主轴居中*/
}

Effect:

CSS Tutorial

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