CODEWITHSUNDEEP
htmlcss
chobo2
chobo2

Reputation: 85765

How to Vertically Center 2 anchor tags with CSS?

I have something like 

<div class="container">
   <a href="/link">Link1 </a>
   <a href="/link">Link2 </a>
</div>

The container is 100px in height. I want the first link to be around 50px and the next link to be right under it.

I only found solutions on how to vertically center 1 link tag with line-height but that does not work with 2 link tags.

It has to work on IE 8+

Upvotes: 0

Views: 42

Answers (2)

Nathan Bomshteyn
Nathan Bomshteyn

Reputation: 100

.container > a{
    display:block;
}
.container a:first-child{
    padding-top:50px;
}

:first child is supported in IE8

please see the jsfiddle here: http://jsfiddle.net/fdguyjrb/2/

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

*{margin:0;}


.container{
  overflow:hidden;
  height:100px;
  background:#ddd;
}

.container a{
  display:block;
}
.container a:nth-child(1){
  margin-top: 50px;
}
<div class="container">
   <a href="/link">Link1 </a>
   <a href="/link">Link2 </a>
</div>

.container a{
   display:block; /* bam, now are vertically aligned inside container */
}
.container a:nth-child(1){ /* Target the first A */
   margin-top: 50px ;      /* play around that one */
}

Upvotes: 1

Related Questions