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

问题描述

问 题

想要这样的效果，这是用position做出来的，

除了用Position还有别的办法吗？用下面的代码为什么黄色背景部分会不在父元素里面？我想的是应该两个子div会并排排在父div里，因为用了inline-block，而且宽度和高度也没有超出父div

            <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;
}

解决方案

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

至于为什么黄色背景部分不在父元素内，是因为浏览器默认的对齐方式是baseline的。

可以看到，由于你的user_head的margin属性，把基线往下撑开了，而又由于第二个div里有个a标签，最后结果是a里面的文字基于基线对齐。

如果你把a标签删掉，就可以看到第二个div跟被撑下去的基线是对齐的。
解决方法是把第二个的vertical-align属性设置为top就行了。

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

这篇关于css - 一个div里面包含两个div,第二个子div有一个<a>标签，让这个<a>标签在第一个大的DIV垂直居中有哪些办法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！