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

【问题标题】：Centering Input element and image on the same line using CSS使用 CSS 将输入元素和图像居中在同一行
【发布时间】：2017-02-22 13:40:00
【问题描述】：

我正在尝试将输入元素和小 png 文件垂直居中放在 div 的同一行上。居中是指一条水平线将穿过 div、输入元素和 png 文件的垂直中心。输入元素是 400px 宽 x 26px 高，png 文件是 24px 宽 x 30px 高。容器 div 宽 445 像素，高 36 像素。 HTML和CSS如下。到目前为止，我发现这样做的唯一方法是使输入元素和 png 文件都为 position:relative，然后使用 top:、bottom:、left: 或 right: 偏移来准确定位我想要的位置.我对 HTML/CSS 相当陌生，使用 position:relative 和特定的偏移量似乎是一种蛮力的方法来做到这一点。有没有更简单、更优雅或首选的方法来做到这一点？

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

【问题讨论】：

标签： html css centering

【解决方案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>

【讨论】：

【解决方案2】：

你应该使用 'flex' css 属性，它很容易使用。

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

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

【讨论】：

【解决方案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>

【讨论】：