Vertical Align Middle on an Inline-Block Anchor Tag

Vertical align middle on an inline-block anchor tag

The only reliable way to I've found align text vertically and allow wrapping of the text if it gets too long is with a 2 container approach.

The outer container should have a line height of at least double that specified for the inner container. In your case, that means the following:

a {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
    line-height: 150px;
    display: block;
}

a span {
    display:inline;
    display:inline-table;
    display:inline-block;
    vertical-align:middle;
    line-height: 20px;
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}

Add float left on the a tag if you want everything inline. Here's the updated example with long text in the A tag too..
http://jsfiddle.net/bZsaw/13/

You can set the line height on the span to whatever you like and if it is less than half of the line height of the parent, it will center AND allow text wrapping if your text exceeds the parent container width. This works on all modern browsers as far as I know.

Center Vertically Anchor Tag in inline-block

You need to use flex property to center align anchor tag.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,300&family=Roboto+Mono&family=Roboto:wght@100;400&display=swap');

*{
    background-color: rgb(26, 26, 26);
    margin: 0;
    padding: 0;
}
body{
      display: flex;
      justify-content: center;
      align-items: center;
      height:100vh;
 }
a{
     display: flex;
     justify-content: center;
     align-items: center;
     width:200px;
    border: 1px solid rgb(255, 90, 90);
    color: rgb(255, 124, 124);
    background-color: rgb(255, 85, 85, 0.5);
    text-decoration: none;
    border-radius: 5px;
    padding: 1.5px 12px;
    text-transform: capitalize;
    font-family: 'Roboto Flex', Sans-Serif;
    font-size: xx-large;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
    <link rel="stylesheet" href="button.css">
</head>
<body>
   
    <center><a href="#" target="_blank"">Export</a>
</body>
</html>

CSS can't align middle text inside anchor inline-block

You can vertically align inline-block elements using a pseudo element like this:

.inner a:after {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle;
 }

See demo below:

.outer {

  position: relative;

  height: 400px;

}

.inner {

  position: absolute;

  top: 0;

  bottom: 0;

  text-align: center;

  font-size: 28px;

  font-weight: bold;

  height: 100%;

  border: 1px solid #000;

}

.inner a {

  text-decoration: none;

  display: inline-block;

  border: 1px solid #ff0000;

  padding-left: 18px;

  padding-right: 18px;

  height: 100%;

  vertical-align: middle;

}

.inner a:after {

  content: '';

  height: 100%;

  display: inline-block;

  vertical-align: middle;

}

<div class="outer">

  <nav class="inner">

    <a href="#">link</a>

    <a href="#">link</a>

    <a href="#">link</a>

  </nav>

</div>

Text vertical align inside a tag

Demo Fiddle

add this css

.fa
{
   vertical-align: middle;
}

CSS vertical-align center on block or inline-block anchor elements

Assign a line-height equal to the box height to align it vertically to the middle.

#menu > div > a {
    color: #000;
    height: 40px;
    display: inline-block !important;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    line-height: 40px; /* added this line */
}

Demo

CSS vertical-align:middle on div inside anchor

There is no need to use display: table-cell or even float anywere in this example.

To vertically center the text in the header, set the line-height of the <h2> to match the height of #h2wrap. Or remove height from #h2wrap and increase its top and bottom padding instead.

To vertically center the images, labels and the buttons within the <a> tags, set their display to inline-block and add a vertical-align: middle. You will have to explicitly set their widths and also eliminate the extra spaces caused by inline-block, but I believe this would be the easiest solution.

How do I vertically align text inside an anchor element, which is nested within an unordered list

you may use a pseudo element displayed as an inline-box using full height of li and vertical-aligned to midlle. DEMO

body, html {
    height:100%; /* needed for demo */
}
nav {
    height: 50%; /* increased for demo */
    width: 100%;
}
nav ul {
    height: 100%;
    margin: 0px;
}
nav ul li {
    height: 33%;
    box-shadow:inset 0 0 0 1px; /* show me li , for demo */
}
nav ul li:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align: middle;
}

edit

If you also reset display and vertical-align on <a>, links can be spread on a few lines (demo below):

body,

html {

  height: 100%;

}

nav {

  height: 70%; /* height set for snippet demo purpose, could be really too much  */

  width: 100%;

}

nav ul {

  height: 100%; /* will follow height, inherit height value , set in nav if any avalaible  */

  margin: 0px;

}

nav ul li {

  height: 33%;

  /* see me and my center*/

  box-shadow: inset 0 0 0 1px;

  background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);

}

nav ul li:before {

  content: '';

  height: 100%;

  display: inline-block;

  vertical-align: middle;

}

a {

  display: inline-block;

  vertical-align: middle;

}

<nav>

  <ul>

    <li><a href="html/login.html">Login</a>

    </li>

    <li><a href="html/user_registration.html">Register</a>

    </li>

    <li><a href="#">Programmes<br/> Offered</a>

    </li>

  </ul>

</nav>

Vertical align not working on inline-block

It doesn't work because vertical-align sets the alignment of inline-level contents with respect to their line box, not their containing block:

This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.

A line box is

The rectangular area that contains the boxes that form a line

When you see some text which has multiple lines, each one is a line box. For example, if you have

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

Vertical Align Middle on an Inline-Block Anchor Tag