<html lang="en">
<head>
<meta charset="UTF-8">
<title>div中img垂直居中</title>
</head>
<style type="text/css">
div{
height:200px;
background:#eee;
vertical-align:middle;
}
img{
height:40px;
vertical-align:middle;
}
span{
height:100%;
display:inline-block;
vertical-align:middle;
}
</style>
<body>
<div>
<span></span>
<img src="https://www.baidu.com/img/bd_logo1.png" alt="" />
<a style="vertical-align: middle">徐同保</a>
</div>
</body>
div中img和a链接同时居中
原创
©著作权归作者所有:来自51CTO博客作者徐同保的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 文字加载动画效果
用 css 实现多字符模拟加载动画效果。
css 加载动画 交互 ux 动效 -
CSS布局,div居中,文字居中
div居中 文字居中 文字垂直居中
文字居中 垂直居中 宽高 缩进 div居中 -
CSS 文字 居中布局
除了flex,想让文字垂直居中还可: 1.行高: 2.table-cell + veticel:middle
垂直居中 javascript html -
文字垂直居中(HTML、CSS)
文字垂直居中(HTML、CSS)要使文字居中 即将文字行高等于盒子高度即可实现<!DOCTYPE html><h
css html css3 html5 垂直居中