使用css水平对齐不同高度和未知宽度的元素

Question

考虑以下

<span class="title">
  <h1>This is the title</h1>
  <input type="button" class="btn"></input>
</span>

我希望<span>的宽度为 100%。 按钮只有一个图标，按钮大小为 40 x 40。现在按钮的宽度和高度是已知的，而<h1>的宽度和高度是未知的。
我希望<h1>和<input>在<span>中间垂直对齐，并在图像中水平对齐。 我希望<h1>在<span> <h1>居中对齐，而<input>应该在右边。 如何使用 CSS 实现这一点？

Answer 1

使用以下代码并根据您的需要进行修改。

 div{display:table;width:100%;border:1px solid;} span{display:table-cell;height:150px;text-align:center;vertical-align:middle;} .btn{float:right;} h1{margin:0;}

 <div> <span class="title"> <input type="button" class="btn"></input> <h1>This is the title</h1> </span> </div>