CODEWITHSUNDEEP
htmlcss
shubham agrawal
shubham agrawal

Reputation: 3541

How can I vertical align text at top of div?

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.

Upvotes: 2

Views: 12591

Answers (7)

Suresh Sapkota
Suresh Sapkota

Reputation: 259

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;     
}

Upvotes: 0

Gerrit
Gerrit

Reputation: 1412

Translating 🔝 :

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

CSS grid 📐 :

p {
  display: grid;
}

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

Upvotes: 0

newlearner
newlearner

Reputation: 187

here is the examplesince you cannot edit the HTMLyou can make a css change example:

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

Upvotes: 1

saifudeen ni
saifudeen ni

Reputation: 145

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

Upvotes: 0

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Please see this and let me know.

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

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 3

Ori Drori
Ori Drori

Reputation: 191946

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>

Upvotes: 3

Related Questions