如何在不关闭中心元素位置的情况下正确对齐表单？

Question

我有一个网页，里面有一个带有img和表单的标题（div）。

img 与中心标签居中，我将表单与 float: right; 对齐。

问题是，使用float: right;会使 img 的居中关闭。

如何在不偏离中心元素位置的情况下正确对齐表单元素？

Answer 1

你可以

使用flex。不可见的项目和表单应具有相同的宽度。

.header{
  height:60px;
  background-color:green;
  display:flex;
  flex-direction:row;
  align-items:center;
}
.header>div:first-child {
  margin-right: auto;
  visibility: hidden;
  width:100px;
}
.header img{
  width:80px;
  height:50px;
  margin:0;
  padding:5px;
}
.header form{
  margin:0;
  padding:0;
  margin-left:auto;
  width:100px;
}
.header form input{
  width:90px;
}

<div class="header">
  <div>invisible</div>
  <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
  <img src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/>
  <form>
    <input type="text"/>
  </form>
</div>

Answer 2

你想要这个吗？还有形式呢，同样的 img 线？请发布您的代码

form {
  overflow: hidden;
}
input {
  float: right;
  clear: both;
}
img {
    display: block;
    margin: auto;
    width: 40%;
}

<div>
  <h2>Center an Image and form at right , wanna same line???</h2>
<p>To center an image, use margin: auto; and make it into a block element:</p>
<img src="http://i.imgur.com/0kQMU8i.png" alt="Paris" style="width:40%">
  <form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>
</div>