Question

我有一个问题，我无法将glypicon放到其旁边的输入字段的中心。这是我的代码：

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

<head>
    <meta charset="UTF-8">

    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .mydiv {
            font-size: 100px;
        }

        .glyphicon-search {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="mydiv">
        <input class="input" type='text' placeholder="ABC" autocomplete="off"><div class="glyphicon glyphicon-search"></div>
    </div>
</body>

</html>

这就是它的样子：

如箭头所示，我希望将图像移动一点点。怎么可能？

Answer 1

您可以在图标上使用vertical-align来影响它。或者在父级上display: flex; align-items: center垂直对齐所有内容。您还可以使用transform: translateY();

进行微调

我在这里使用flex，其他两个选项被注释掉了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <!-- Bootstrap Core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    .mydiv {
            font-size: 100px;
        }

        .glyphicon-search {
            font-size: 30px;
          /*vertical-align: middle;
          transform: translateY(-10px);*/
        }
    .mydiv {
      display: flex;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="mydiv">
    <input class="input" type='text' placeholder="ABC" autocomplete="off">
    <div class="glyphicon glyphicon-search"></div>
  </div>
</body>

</html>

将glyphicon div移动得更高

1 个答案: