我想在div內的同一行上垂直居中輸入元素和小png文件。通過居中我的意思是一條水平線可以穿過div的垂直中心,輸入元素和png文件。輸入元素寬度爲400px,高度爲26px,png文件寬度爲24px,高度爲30px。容器div寬445px,高36px。下面是HTML和CSS。到目前爲止,我發現的唯一方法是使input元素和png文件的位置:relative,然後使用top :, bottom :, left :,或right:offset來精確定位我想要的位置。我對HTML/CSS相當陌生,並且使用位置:具有特定偏移量的相對似乎是一種蠻力方法。有沒有更簡單,更優雅或更喜歡的方式來做到這一點?使用CSS在同一行上使用CSS居中輸入元素和圖像
HTML是:
<div class="inner">
<input type="text">
<img class="mic" src="mic.png">
</div>
CSS是:
.inner {
margin-left: auto;
margin-right: auto;
height: 36px;
width:445px;
border: 1px solid grey;
}
input {
margin-left: auto;
margin-right: auto;
height: 26px;
width: 400px;
border: none;
text-align: left
}
.mic {
height: 30px;
width: 24px;
}