Vertical alignement refuses

Question

.txtSt {
text-align: center;
/* DOESN't WORK?
vertical-align: middle; */
font-size: 10px;
font-family: arial;
}

maybe it is something dumb..any help is appreciated. Thx

*EDIT code added

https://code.sololearn.com/WaMJ34I3p91i/?ref=app

Answer 1

Take a look at CSS flexbox! Finally we have a tool for properly doing stuff like this.
It's kind of funny that it took us decades to figure out the simple task of centering things and we had to resort to putting in pixel values by hand or other odd things.
But with flexbox it's easy, it's a great addition to CSS.

Answer 2

You got it to work now ?

Answer 3

Line - height

Answer 4

Gordon didn't try that but, problem solved putting text in <span> and positioning that 😉

Answer 5

You can also add .txtSt {
display: table-cell
}

Answer 6

Thx for the ideas everyone 🙏

*Edit for people interested in ways how to solve such problems, found this article;

https://vanseodesign.com/css/vertical-centering/

Answer 7

Schindlabua flexbox Perfect Centering 😀 That sounds promesing, I will try that later!👌

SOLUTION: Set both the justify-content and align-itemsproperties to center, and the flex item will be perfectly centered:

Example

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Answer 8

You cannot apply a vertical-align to a block element. What type is .txtSt ?

Answer 9

its only working in table cell.

i usually use, position as absolute then move the element 50% from top. then move it again in opposite direction by 50% of its own height by using translateY -50%
(50%containter height - 50%element height) = center