CSS：在div顶部垂直对齐文本

Question

How to align the <span> text at top of the <div> if float:right is applied to the <span> .

Here is my code:

 span { float: right; } 

 <div>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit, <br> sed diam nonummy nibh dolore <span>Align me</span> </div> 

I tried vertical-align:text-top but its not working. I can't use negative margin and can't even make any changes to HTML.

Answer 1

You can align it to the top right using position: absolute :

  p { position: relative; } span { position: absolute; top: 0; right: 0; } 

 <p>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit,<br> sed diam nonummy nibh dolore <span>Align me</span></p> 

Answer 2

Please see this and let me know.

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

Answer 3

You can use Flexbox and set align-items: flex-start .

 p { display: flex; align-items: flex-start; justify-content: space-between; } 

 <p>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit,<br> sed diam nonummy nibh dolore <span>Align me</span></p> 

Answer 4

here is the example since you cannot edit the HTML you can make a css change example:

    span#mySpan {
    background-color:yellow;
    vertical-align:middle;
}

Answer 5

I think position:absolute is best now.
Like,
position:absolute; right:0; top:0;}
just try

Answer 6

Translating 🔝 :

span {
  float: right;
  transform:translateY(-200%)
}

CSS grid 📐 :

p {
  display: grid;
}

span {
  float: right;
  grid-column-start:2;
  text-align: right;
}

Answer 7

Hope this will help you to solve your problem:

<div>Lorem ipsum dolor sit amet,
  <br>consectetuer adipiscing elit,
  <br> sed diam nonummy nibh dolore
  <span>Align me</span>
</div>


div {  
   border: 1px solid gray;
   position: relative; 
   display: flex;
    }

span {
  display: inline-block;     
}