Question

我正在尝试将div中的输入元素和小png文件垂直居中于同一行。通过居中，我的意思是单个水平线将通过div的垂直中心，输入元素和png文件。输入元素为400px宽，26px高，png文件宽24px，高30px。容器div宽445px，高36px。 HTML和CSS如下。到目前为止，我发现这样做的唯一方法是将输入元素和png文件放在两个位置：relative然后使用top：，bottom：，left：或right：offsets来准确定位到我想要的位置。我对HTML / CSS相当新，并且使用position：具有特定偏移的相对似乎是一种强力方法来执行此操作。有没有更简单，更优雅或首选的方式来做到这一点？

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;
      }

Answer 1

您可以使用以下代码示例。我使用verticle-align：middle作为图像，然后使用line-height作为内包装。

.inner {
     margin-left: auto;
    margin-right: auto;
    height: 50px;
    width: 445px;
    border: 1px solid grey;
    display: inline-block;
    line-height: 3em; 
      }

input {
        margin-left: auto;
    margin-right: auto;
    height: 28px;
    width: 400px;
    text-align: left;
    border:solid 1px #000;    
      }
.mic {
      height: 30px;
      width: 24px;
      vertical-align: middle;
      }

<div class="inner">
  <input type="text">
  <img class="mic" src="mic.png">
</div>

Answer 2

你应该使用＆＃39; flex＆＃39; css属性它易于使用。

＆＃13;

.inner {
    height: 50px;
    width: 445px;
    border: 1px solid grey;
    padding:0 16px;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	
	margin:auto;
}
input {
	-webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
	
	padding:5px;
    border:solid 1px #000;
	margin-right:8px;
}
.mic {
	height: 30px;
	width: 24px;
}

＆＃13;

<div class="inner">
  <input type="text">
  <img class="mic" src="mic.png">
</div>

＆＃13;

Answer 3

你可以试试这个：

    .inner {
        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;
    }
    .container{
   display: flex;
    align-items: center;
    justify-content: center;
    height:700px;
  
  }

<body class="container">
    <div class="inner">
        <input type="text">
        <img class="mic" src="http://placehold.it/24x30.png">
    </div>
</body>

使用CSS将输入元素和图像居中在同一行上

3 个答案: