css 定位问题

<div style="position:absoulte">
      <span class="uncheck-icon"></span>
      <span style="margin-left:20px;display:inline-block;position:absolute;">记住密码</span>
    </div>

.uncheck-icon {
  margin-left: 16px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50);
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.8rem;
  background: url(../assets/checked.png) no-repeat 0;
  background-size: 20px 20px;
  display: inline-block;
}

怎么对齐？有几种实现方式？上面代码有什么问题，求详细分析,批评指正

如何优雅实现table表头的斜线!

.uncheck-icon {
  margin-left: 16px;
  position: relative;
  width: 1.5rem;
  height: 1.8rem;
  background: url(../assets/checked.png) no-repeat 0;
  background-size: 20px 20px;
  display: inline-block;
  vertical-align:middle
}

<div style="position:absoulte;">
      <span class="uncheck-icon"></span>
      <span style="display:inline-block;vertical-align:middle">记住密码</span>
    </div>

css3 css

阅读 3.6k

3 个回答

得票最新

int64ago

834158

发布于
2017-07-08

vertical-align

荆棘鸟

39863351

发布于
2017-07-08

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
    *{margin: 0; padding: 0;}
        .one{
            width: 30px;
            height: 30px;
            background: red;
            float:left;
        }
        .two{

        }
    </style>
</head>
<body>
<div>
  <span class="one"></span>
  <span class="two">记住密码</span>
</div>
</body>

</html>

用浮动,可以自动转块,然后两个span直间还会有间隙,这个也是要解决的.