CODEWITHSUNDEEP
css
Corentin Branquet
Corentin Branquet

Reputation: 1576

Center span vertically

I've this code :

a {
  background: #A9A9A9;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 20%;
  vertical-align: middle;
  float: right;
  text-align: center;
}
a span {
  display: inline-block;
  vertical-align: middle;
}
<a href="#"><span>Center</span></a>

I want to center vertically the span into a who is in position: absolute;.

Upvotes: 0

Views: 1388

Answers (4)

Anubhav pun
Anubhav pun

Reputation: 1323

changes in style may help you

 a {
    background: #A9A9A9;
    display: table;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
    vertical-align: middle;
    float: right;
    text-align: center;
}

a span {
    display: table-cell;
    vertical-align: middle;
}

<a href="#"><span>Center</span></a>

Upvotes: 0

ketan
ketan

Reputation: 19341

Use position:relative to span and give top:50%

a {
	background: #A9A9A9;
	display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
    vertical-align: middle;
	float: right;
	text-align: center;
}

a span {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translate(0px, -50%);
}
<a href="#"><span>Center</span></a>

Solution 2:

use display:table and display:table-cell.

a {
  background: #A9A9A9;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 20%;
  vertical-align: middle;
  float: right;
  text-align: center;
  display:table;
}
a span {
  display: table-cell;
  vertical-align: middle;
}
<a href="#"><span>Center</span></a>

Upvotes: 3

JamieC
JamieC

Reputation: 607

Great use case for flexbox. Just make sure you check vendor prefixes and broswer support:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

a {
	background: #A9A9A9;
	display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
}

a span {
  
}
<a href="#"><span>Center</span></a>

Upvotes: 1

Krish
Krish

Reputation: 1894

a {
	background: #A9A9A9;
	display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
    vertical-align: middle;
	float: right;
	text-align: center;
}

a span {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    height: 16px;
    margin-top: -8px; /* height/2 */ 
}
<a href="#"><span>Center</span></a>

Upvotes: 0

Related Questions