CODEWITHSUNDEEP
css
C.Ronaldo
C.Ronaldo

Reputation: 611

How to vertical align an anchor inside li?

I want to create a menu with a 'button' (anchor) in the last <li>.

So far so good, but when I want to create the button, I can't get it to vertical center it.

Here is a live demo.

nav
{
  width: 100%;
  height: 60px;
  
  background-color:blue;
}

ul
{
  list-style-type:none;
}

li
{
    height: 60px;
  	color: #000000;
		font-family: $font-family-semi-bold;
		float:left;
    background-color:green;
    line-height:60px;
    margin-left: 20px;
    margin-right: 20px;
}

.vertical
{
  display: inline-block;
  height: 40px;
  background-color:red;
}
<nav>
  <ul>
    <li>Hello World1</li>
    <li>Hello World2</li>
    <li>Hello World3</li>
    <li>
      <a href="#" class="vertical">
        Vertical align this!
      </a>
    </li>
  </ul>
</nav>

Upvotes: 1

Views: 3084

Answers (3)

Hunter Turner
Hunter Turner

Reputation: 6894

If you would like to vertically center the <a> tag as well as the text inside of it, you can use flexbox.

CSS

.vertical
{
  display: inline-flex;
  align-items: center;
}

JSFiddle

nav
{
  width: 100%;
  height: 60px;
  
  background-color:blue;
}

ul
{
  list-style-type:none;
}

li
{
    height: 60px;
    color: #000000;
        font-family: $font-family-semi-bold;
        float:left;
    background-color:green;
    line-height:60px;
    margin-left: 20px;
    margin-right: 20px;
}

.vertical
{
  display: inline-flex;
  align-items: center;
  height: 40px;
  background-color:red;
}
<nav>
  <ul>
    <li>Hello World1</li>
    <li>Hello World2</li>
    <li>Hello World3</li>
    <li>
      <a href="#" class="vertical">
        Vertical align this!
      </a>
    </li>
  </ul>
</nav>

Upvotes: 4

Franco
Franco

Reputation: 2329

Vertical-align as @tatty say is ok but you also need to adjust the height of the element:

.vertical
{
  display: inline-block;
  height: 60px;
  background-color:red;
  vertical-align: middle;
}

Otherwise it wil not be on the same line with your other elements

Upvotes: 1

akcan
akcan

Reputation: 299

Add vertical-align: middle to .vertical.

code updated https://jsfiddle.net/wksfdszu/1/

Upvotes: 1

Related Questions