PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 16, 2022

[FIXED] How can I set the inside text of an <a> element vertically in the middle?

 November 16, 2022     css, vertical-alignment     No comments   

Issue

I have an <a> tag containing a background image and text. The problem is that the text sticks to the top of the image.

<a class="BigBlueButton" href="/where-is-my-order.aspx">
    Where Is My Order?
</a>

And my CSS is as follows:

.BigBlueButton
{
    width: 233px;
    vertical-align: middle;
    text-align: center;
    height: 122px;
    background: url(../img/GreenBotton.png) no-repeat;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 1%;
    display: inline-block;
    color: White;
    font-size: large;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
}

I have used line-height, but for tags with little bit larger texts the whole text does not display.

What is it with given the CSS and HTML content:

Normal one

And what I get with line-height:

With line-height


Solution

To solve this, finally I found the following workaround:

<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Contentdas asd ad adasd asd asdad </span>
    </span>
</a>
<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
        <span class="div_txt">Content</span>
    </span>
</a>

And the following CSS

a.div_a {
    display: inline-table;
    width: 200px;
    height: 100px;
    background-color: #CCC;
    background-image: url(http://jsfiddle.net/img/logo.png);
    text-align: center;
}

.wrapper {
    display: table-cell;
    vertical-align: middle;
}

DEMO



Answered By - amir moradifard
Answer Checked By - Mildred Charles (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing