论坛

标题: btn设置了margin无效，是哪里写错了，求解？ [打印本页]

作者: 燕雀才人 时间: 2018-5-13 15:57
标题: btn设置了margin无效，是哪里写错了，求解？
字体垂直方向无法居中？
[attach]129464[/attach]
<title>无标题文档</title>
<style type="text/css">
  .con{width:400px;height:400px;background: #B8B8B8;margin: 100px auto;}

  .con .btn{ width: 150px;height: 40px;text-align: center;line-height: 40px;
font-size:18px;font-weight:900;margin:50px auto;position: relative;}

  .btn span{display:block;position: absolute;transition: 0.3s;opacity: 1;}
  .btn .top{ width:150px;height: 2px;background: #0AA796;top: 0;left: -150px;}
  .btn .left{width:2px;height: 40px;background: #0AA796;top: -40px;left: 0;}
  .btn .bottom{ width:150px;height: 2px;background: #0AA796;top: 40px;left: 150px;}
  .btn .right{width:2px;height: 40px;background: #0AA796;top: 40px;left: 150px;}

  .btn:hover span{opacity: 1;}
  .btn:hover .top{left: 0;}
  .btn:hover .left{top: 0;}
  .btn:hover .bottom{left: 0;}
  .btn:hover .right{top: 0;}
</style>
</head>
<body>
<div class="con">
  <div class="btn">
<span class="top"></span>
<span class="left"></span>
<span class="bottom"></span>
<span class="right"></span>
MORE
  </div>
</div>

</body>

欢迎光临论坛 (http://bbs.qinxue.com/)