div里面文字和图片水平居中

何人在此撒野

已于 2023-08-27 15:23:46 修改

阅读量704

点赞数

文章标签：前端 javascript html

于 2023-08-27 15:20:40 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41955606/article/details/132523879

版权

<div  style="display: flex;align-items: center;">

    <img  style="display:table-cell" />

    <span  style="display:table-cell"></span>

</div>

0、文本在div右侧显示

text-align: right;

1、两行文本两端对齐

text-align: justify

2、图片在div居中对齐

<div>
　　<img src="">
</div>


div{
　　width:200px;
　　height:200px;
　　border:1pxsolid#ccc;
　　position:relative;//父元素设置绝对定位
}

img{
　　position:absolute;//相对定位
　　width:80px;
　　height:50px;
　　top:0;
　　left:0;
　　right:0;
　　bottom:0;
　　margin:auto;//使其垂直居中
}