对齐底部的文字

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
}

<强> DEMO

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演示中心对齐。