Xiao_冬
2019-04-17 22:12
采纳率: 100%
浏览 1.8k
已采纳

div中a标签垂直居中问题?

问题如图所示:

图片说明

尝试去掉div标签中font-size:0; 发现可以垂直居中,但是a标签间有间隙。请问是什么原因??



贴上源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body,div,a{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 596px;
            height: 96px;
            margin: 20px auto;
            border: 2px dashed #000;
            text-align: center;
            font-size: 0;
            line-height: 96px;
        }
        .box1 a{
            display: inline-block;
            width: 98px;
            height: 28px;
            border: 1px solid gold;
            text-decoration: none;
            font: 16px/28px "Microsoft YaHei";
            margin-left: -1px;
        }
    </style>
    <title>Web编程技术</title>
</head>
<body>
    <div class="box1">
        <a href="#">测试</a>
        <a href="#">测试</a>
        <a href="#">测试</a>
        <a href="#">测试</a>
    </div>
</body>
</html>
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 前端精髓 2019-04-18 09:47
    已采纳

    去掉div标签中font-size:0; 会导致行内元素之间有1个空格(空白折叠现象),可能是因为写代码a标签换行导致的,应该让a标签连在一起写。

    评论
    解决 无用
    打赏 举报
查看更多回答(4条)

相关推荐 更多相似问题