使用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>居中对齐，而<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>