Member Avatar for cgull

Hello, I have a line where the first words are 16px and the rest are 12px.

How do I align to words to the bottom of the line?

Right now, the smaller text appears in the middle of the line.

I am attaching a screenshot, the first paragraph is the one I need to fix.

Thanks for the help.

text.jpg 31.33 KB
  • 2 Contributors
  • 6 Replies
  • 4K Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by cgull

Dani AI

Generated

What you are trying to control here is baseline alignment. By default, inline text of different sizes shares the same baseline, but if the larger run has a taller line box, the smaller run can look visually centered rather than bottom-aligned. Adding vertical-align to the <p> will not help because it does not affect block boxes; it applies to inline-level or table-cell elements. Set vertical-align on the inline element that contains the larger text, using text-bottom (or bottom) so its text edge sits on the parent text edge. See MDN for how vertical-align works on inline and inline-block elements. MDN: vertical-align

Two robust patterns you can drop in:

<p class="lead">
  <span class="big">Big text</span> the rest of the sentence continues here...
</p>

<style>
.lead { line-height: 1.2; }                  /* unitless line-height keeps metrics predictable */
.big  { font-size: 16px; font-weight: 700; vertical-align: text-bottom; }
</style>
<p>
  <span class="big ib">Big text</span><span class="rest ib"> smaller text continues...</span>
</p>

<style>
.ib   { display: inline-block; vertical-align: bottom; }
.big  { font-size: 16px; font-weight: 700; }
.rest { font-size: 12px; }
</style>

If spacing still feels off, tune the paragraph’s unitless line-height rather than pixel values so it scales with the font size. MDN: line-height

Recommended Answers

All 6 Replies

Member Avatar for expresscasket

Have you tried

style="vertical-align: bottom;"

to the parent element of 16px and 12px text line.

Edited by expresscasket because: n/a
Member Avatar for cgull

Have you tried

style="vertical-align: bottom;"

to the parent element of 16px and 12px text line.

Thank you, but I did try that before I posted here and it doesn't help:

<p style="padding-bottom: 20px; vertical-align: bottom;"><span style="font-size: 16px; font-weight: bold;">Zebra Touring</span> specialises in short day trips, 8-12 day Golf tours and safaris, as well as airport shuttle services for Johannesburg, Pretoria and Lanseria.</p>
Member Avatar for expresscasket

Can you please share us the website url? Let see i can able to find something or not?

Member Avatar for cgull

Can you please share us the website url? Let see i can able to find something or not?

Thanks, the site is not online yet, so I put this page on my server:

Edited by cgull because: n/a
Member Avatar for expresscasket

Try this one, vertical-align: text-bottom seems to be working.

<span style="font-size: 16px; font-weight: bold; vertical-align: text-bottom;">Zebra Touring</span>
Member Avatar for cgull

Try this one, vertical-align: text-bottom seems to be working.

<span style="font-size: 16px; font-weight: bold; vertical-align: text-bottom;">Zebra Touring</span>

Thank you, Thank you, THANK YOU ! that helped :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.