html - 底部对齐文本

Question

我发现难以解决的 css/html 问题。假设我们在其中有一个链接和一个 h2，如下所示

代码如下：

<a href="newLink"><h2>This can be one line or two lines or three..</h2></a>

我需要将线条底部对齐，如下所示......另外请注意，文本也是居中以及底部。这该怎么做？

                                    Andis AGC Clipper Single
Andis AGC 2 Speed Clipper                     Speed

Answer 1

HTML

<div>
 <h2>one line</h2>
   <h2>This can be one line or two lines or three..</h2>
</div>

CSS

div{background:grey; width:100%}
h2{
  font-size:20px; 
  color:white; width:49%; 
  background:red;
  display:inline-block;
  text-align:center
}

演示

Answer 2

HTML

<div>
 <h2>one line</h2>
  <h2 align=center>This can be one line or two lines or three..</h2>
</div>

CSS

div{background:grey; width:100%}
h2{
  font-size:20px; 
  color:white; width:49%; 
  display:inline-block
}

为中心对齐编辑了 Sowmya 演示。