Question

是否有人知道我在div中垂直对齐img时缺少什么？

我有一些sass（工作css例子也非常感激:-)）

我认为<?php if(!isset($_SESSION)){ session_start(); } include("configuration.php"); ?> <html> <body> <?php if(isset($_SESSION['SESS_EXIST'])){ if ($_SESSION['SESS_EXIST'] == true && $_SESSION['SESS_TYPE'] == 'A' ){ ?> //this is the user html information form <?php } else if ($_SESSION['SESS_EXIST'] == true && $_SESSION['SESS_TYPE1'] == 'B' ){ ?> //this is the admin html information form <?php } } else { ?> //ask user/admin to login html form <form action ="login.php"> <button type="submit" name="login" class="btn-primary">Sign Up</button> </form> <?php } ?> </body> </html>已经足够了？但它没有用。边距和高度会自动设置在text-align上，因此G知道它正在工作。

<img>

和一些html

.testdiv {
  font-size: rem(12);
  height: 80px;
  img {
    margin-left: 12px;
    height: 16px;
    width: 16px;
    text-align: center;
  }
}

有什么想法吗？感谢

Answer 1

您可以使用display: table-cell css属性垂直对齐父级内的元素。

＆＃13;

.testdiv {
  vertical-align: middle;
  display: table-cell;
  font-size: rem(12);
  text-align: center;
  background: black;
  height: 80px;
  width: 100px;
}

img {
  vertical-align: top;
  height: 16px;
  width: 16px;
}

＆＃13;

<div class="testdiv">
  <img src="images/image.jpg" alt="Image Description">
</div>

＆＃13;

Answer 2

点击此处 jsfiddle

text-align与vertical-align

无关

vertical-align项有多种方式，其中一种是display:flex

代码：

.testdiv {
  font-size: rem(12);
  height: 80px;
  display:flex;
  align-items: center;
  justify-content: center;
  width:100px;
  height:100px;
  border:5px solid red;
      img {
        margin-left: 0px;
        height: 16px;
        width: 16px;
        text-align: center;
  }
}

在div中垂直对齐img？

2 个答案: