CODEWITHSUNDEEP
htmlcss
Return-1
Return-1

Reputation: 2449

Vertical align property aligning element

The spec mentions that the vertical-display property (which only applies on inline and inline block elements ) aligns the element itself but not its content. A span, as i understand it is the element. In this fiddle everything works as expected but would need to be done in order to center the actual text "Beta" in the span?

https://jsfiddle.net/69uhamv5/

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

<span class="b">Beta</span>

P.S: Im not looking for a quick solution, i am aware i can use line height or display table or a handful of other things. I am more intersted in figuring out exactly why it is that this doesnt work, or rather, why it is that it targets the span element but not the text inside and what would i need to to to target the text inside.

Upvotes: 0

Views: 41

Answers (2)

Artiom S.
Artiom S.

Reputation: 46

So, you have somme solution:

Variant 1 add line-height

.b{
  background-color:red;
  display: inline-block;
  height:120px;
  line-height: 7.5em;
}

try here: https://jsfiddle.net/69uhamv5/6/

Variant 2 center with table 

.b, span {
  display: table-cell;
  vertical-align:middle;
}
.b {
  background-color:red;
  height:120px;
  }

body{
  display: table;
  height:300px;
  }
}

try here https://jsfiddle.net/69uhamv5/5/

Upvotes: 2

Atimene Nazim
Atimene Nazim

Reputation: 419

Here is my approach :

.b{

  background-color:red;
  height:120px;
   display: inline-flex;
  align-items: center;
  
}

body{
  height:300px;
  
  }
}
<body>
  <span >Alpha</span><span class="b">Beta</span><span>Gamma</span>
  <script src="js/scripts.js"></script>
</body>

Upvotes: 2

Related Questions