一、图片垂直居中
参考链接:https://www.jianshu.com/p/6516d925b4b1
HTML代码:
<div class="platetittle">
<img class="plateimg" src="https://dummyimage.com/600x400/000/fff"/>
</div>
css代码:
.platetittle{
height:110px;
border-bottom: 1px solid #99a9bf;
border-top: 1px solid #000;
/*关键代码是下面这两行*/
align-items: center;
display: flex;
}
.plateimg{
width:80px;
height:80px;
/*关键代码是下面这行*/
vertical-align: middle;
}
效果可在这个网站上在线试验:https://heqing0712.github.io/vue-codepen/
二、图文混排,图文垂直居中
参考自:http://www.yanglajiao.com/article/towrabbit/79630522
在父级元素的样式中设置display:flex
,然后图文子级元素垂直方向上的margin都设为auto
三、文字居中
设置父元素的样式即可:text-align:center
示例:
HTML:
<div id="infoWord">
确认删除此工具?
</div>
样式
#infoWord{
font-size: 20px;
text-align: center;
}
效果: