我有一个问题，我无法将 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>
这是它的样子:
我希望将图像按箭头指示稍微向上移动一点。这怎么可能？
最佳答案
您可以在图标上使用 vertical-align 来影响它。或者 显示:flex； align-items: center 在父级上以垂直对齐所有内容。您还可以使用 transform: translateY();
我在这里使用 flex 并注释掉了其他 2 个选项。
<!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>关于html - 将字形 div 移高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43596925/