开发者社区> 问答> 正文

一个div里面包含两个div,第二个子div有一个<a>标签,让这个<a>标签在第一个大的DIV垂直居中有哪些办法?

screenshot

  <div class="user">
            <div class="user_head">
                
            </div>
            <div class="user_name">
                <a href="#">ABC123</a>
            </div>
        </div>


 .user{
    width: 260px;
    height: 100px;
    background-color: gray;
}

.user_head{ 
width: 60px;
height: 60px;
background-color: #b9babe;

margin: 20px 10px 20px 40px;
display: inline-block;

border-radius: 50%;
box-shadow: 0 0 0 5px #2b2e3d inset;
border: 2px solid #b9babe;       
}


   .user_name{
display: inline-block;
height: 100px;
width: 60px;
background-color: yellow;
text-align: center;
}
.user_name a{
line-height: 100px;
text-align: center;
}

展开
收起
杨冬芳 2016-06-22 17:15:22 3179 0
1 条回答
写回答
取消 提交回答
  • IT从业

    行高和高度一致可以使链接在父元素中居中。

    至于为什么黄色背景部分不在父元素内,是因为浏览器默认的对齐方式是baseline的。
    screenshot
    screenshot
    如果你把a标签删掉,就可以看到第二个div跟被撑下去的基线是对齐的。
    解决方法是把第二个的vertical-align属性设置为top就行了。

    注:至于为什么同样没有设置vertical-align,对齐方式是基于元素内的a标签,而不是第二个div,我找不到相关说明,只能猜测浏览器默认处理就是如此。

    2019-07-17 19:45:48
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载