Question

我尝试将图像居中放置在输入字段旁边，尽管尝试使用vertical-align: bottom;时什么也没有发生，并且我的图像未居中放置在我想要的位置。

我尝试使用position:relative，然后使用top，bottom等移动图片，但是我想使用flexbox的方式来做。

我将如何进行此操作以及必须更改哪些div以获得所需的布局。

HTML

<div class="container">
    <h1>Inputs</h1>
    <p class="spacing">multiple inputs...</p>
    <div class="searchinput">
        <input type="text" name="search" id="google-input" placeholder="Google search...">
        <img src="logos/google.png" alt="youtube" class="logos">
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.logos{
    width: 90px;
    vertical-align: bottom;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 90vh;  
}

.searchinput {
    margin-top: 20px;
}


input {
    padding: 20px;
    height: 30px;
    background-color: transparent;
    border: 2px solid black;
    border-radius: 5px;
    color: black;
    font-size: 20px;
    vertical-align: bottom;
}

Answer 1

您需要具有要具有flex属性的项的直接父项才能具有</th>属性。因此，在您的情况下，它将是display:flex。因此，您的.searchinput CSS应该如下：

.searchinput

这是整个内容的摘要：

.searchinput {
    margin-top: 20px;
    display:flex;
    align-items: center;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.logos{
    width: 90px;
    vertical-align: bottom;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 90vh;  
}

.searchinput {
    margin-top: 20px;
    display:flex;
    align-items: center;
}


input {
    padding: 20px;
    height: 30px;
    background-color: transparent;
    border: 2px solid black;
    border-radius: 5px;
    color: black;
    font-size: 20px;
	  vertical-align: bottom;
}

如何使用Flexbox在输入字段旁边将图像居中

1 个答案: