gpt4 book ai didi

css - 居中输入框和图标按钮

转载 作者:行者123 更新时间:2023-11-28 15:53:26 24 4
gpt4 key购买 nike

我想让输入框和图标按钮都垂直居中。我尝试了 flexbox justify-content 和 align-content,但它仍然无法正常工作。在 css 中有什么方法可以做到这一点吗?谢谢。

最佳答案

您必须使用包含 display:flex; 的容器 div 包裹它们。使用 flex-direction 属性总是好的,在您的情况下是 row

然后使用 align-item:center; 垂直对齐元素。如果您希望它们也水平居中,则将 justify-content:center; 添加到下面示例中的 .container 的 css。

我在输入框旁边使用了一个图像和一个超棒的字体图标作为搜索图标,因为您没有在问题中提到您使用的是哪个。

.container{
display:flex;
flex-direction:row;
align-items:center;
}
.container input{
line-height:80px;
margin:0 5px;
}
.container img{
height:50px;
margin:0 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<input type="text" placeholder="Search"/>
<i class="fa fa-search"></i>
<img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg">
</div>

关于css - 居中输入框和图标按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41519334/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com