使用CSS将输入元素和图像核心

我试图将输入元素和小型png文件垂直居中。通过居中，我的意思是一条水平线将穿过DIV的垂直中心，输入元素和PNG文件。输入元件为400px宽x 26px高，而PNG文件为24px宽，高30px。容器Div为445px宽，高36px。HTML和CS在下面。到目前为止，我发现要这样做的唯一方法是将输入元素和png文件既有位置：相对：top：，tops：，tobs：，左：，左：。我是HTML/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;
      }

您可以使用以下代码示例。我使用了垂直 - 单位：图像中间，然后使用线高的内部包装器。

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

您应该使用'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>

您可以尝试以下方法：

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

相关内容

最新更新

热门标签：