Question

<a id="asapg" href="/link/">Text</a>

a#asapg {display: inline-block;cursor: pointer;padding: 15px;text-align: center;border-bottom: 1px solid rgba(121, 119, 119, 0.15);text-transform:uppercase;font-size:16px;width:100%;vertical-align: middle;background: rgba(255,255,255,0.6);min-height: 170px;}

I am trying to vertically center the text in the middle for the link but no luck.

Answer 1

将line-height设为等于元素的height（170px？）

a#asapg{
   ...
   height: 170px;
   line-height: 170px;
}

Answer 2

您还可以使用Flexbox CSS3功能。

 a#asapg {
    height: 170px;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    align-items:center;/*Vertical align*/
    justify-content:center;/*horizontal align*/
  }

将文本垂直放在Python脚本中的<a> tag

2 个答案: