Why Is Vertical-Align:Text-Top; Not Working in CSS

Why is vertical-align:text-top; not working in CSS

The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div. Also text-top only moves the text to the top of the current font size. If you would like to vertically align an inline element to the top just use this.

vertical-align: top;

The paragraph tag is not outdated. Also, the vertical-align attribute applied to a span element may not display as intended in some mozilla browsers.

Why does vertical-align: text-top make element go down?

^{Ref: https://www.w3.org/TR/CSS2/visudet.html#line-height}

To understand this you need to first consider the definition of text-top:

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above).

Then

text-top

Align the top of the box with the top of the parent's content area

So we need to identify the top of the box and the top of the parent's content area

If we add some decorations, we can easily identify them

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  background:red;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

In html use of style=vertical-align: text-top doesnt seem to have any effect

Get rid of the vertical-align, the usage is very limited, it aligns inline elements inside its containing line box, note not containing box, but line box.

.player {
  display: flex;
  align-items: center;
}

audio {margin: auto 1.5rem;}

<div class="player">
  <span name="fileplay">
    <audio preload="none" controls="controls"><source src="Money.wav"></audio>
  </span>
  <span style="vertical-align: text-top">Keep <a href="Money.wav">Money.wav</a></span>
</div>

Vertical-align not working as expected

I highly recommend reading this vertical-align article to gain in-depth understanding of the property.

CSS : vertical align text at top of div

Please see this and let me know.

span {
  float: right;
  position: relative;
  bottom:40px;
}

Vertical-Alignment on top of the page not working

not sure why vertical-align: top; isn't working for you, but you should be able to achieve the same result by setting position to absolute and top to 0%. Be sure that the parent element has position set to relative or the child element can possibly exit its parent.

.parent {  background: yellow;  width: 200px;  height: 150px;  position: relative;}
.child {  background: red;  position: absolute;  top: 0%;  left: 50%;  width: 50px;  height: 50px;  -ms-transform: translateX(-50%);  transform: translateX(-50%);}

<div class="parent">  <div class="child"></div></div>

text-align not working with vertical-align

Here's the code you're looking for, I hope: (These are not the droids you're looking for)

.wrapper {    text-align: center;    height: 200px;    width: 200px;    border: 1px solid black;    display: table;}.container {    display: table-cell;    vertical-align: bottom;}

<div class="wrapper">    <div class="container">        <p>Hello World!</p>        <a href="#">I am a Link!</a>    </div></div>

Vertical text align not working on mobile

after checking your code , your problem isnt with flex and alignement .

its the font you are using font-family: "Tajawal" !important; maybe it has some special line height and vertical alignement i am no font expert , try changing the font to one that does not affect the alignment ,, this font in partical has more bottom padding that top padding hence the sentence display non aligned in its box .

original :

after removing the font :

ps : you are writing content next to the icon directly which leaves whites spaces that might behave differently cross browsers and its not a good practice .

---

Related Topics