html - Text centre vertical alignment -


image

basically, want 'join now!' text centred within green rectangle.

html:

<p class="header-banner-button"><a href="#">join now!</a></p> 

css:

.header-banner-button {      position:absolute;      text-align:center;      vertical-align:middle;      top:68%;      left: 60%;      margin-top: -225px;       margin-left: -500px;      font-size:28px;      color:#fff;      height:35px;      background-color:#4caf50;      border-radius:15px; } 

thanks guys :)

try setting line-height height of button:

line-height: 35px; 

also note it's better use <button> element. or, if have to, use <a> element without enclosing <p> element.


Comments

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -