Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Getting text to align in markdown code


Marzon

Question

See image for reference.

The grey words do not align with the "Example Title" or each other. Is there a way to align them? I'm totally stuck. 

Code:

<h2 style="color: font-size: 21px;"> **Example Title**<span style="color: grey; font-size: 21px; font-weight: 400;"> |</span><span style="color: grey; font-size: 17px; font-weight: 400;"> Washington DC </span><div style="color: grey; text-align: right; font-size: 17px; font-weight: 400;"> Photography: Word </div></h2>

Thanks!

Screenshot 2020-09-11 122051.png

Edited by Marzon
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Lining things up when h tags are involved can be a little tricky as they are block elements. I suggest a different tack by using CSS Grid. You can put the following into a code block like y

Posted Images

4 answers to this question

Recommended Posts

  • 1

Lining things up when h tags are involved can be a little tricky as they are block elements. I suggest a different tack by using CSS Grid.

1204857741_ScreenShot2020-09-11at3_29_48PM.thumb.png.93a428e751431af56ce9fc5b83b9501e.png

You can put the following into a code block like you've done and see how it looks.

<style>

  .bhs-photo-caption-block {
  
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    
    display: -ms-grid;
    display: grid;
    
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
    
    }
    
  .bhs-photo-caption-block--title, .bhs-photo-caption-block--separator {
  
    font-size: 21px;
    
    }
    
  .bhs-photo-caption-block--title {
  
    font-weight: 900;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location, .bhs-photo-caption-block--separator {
  
    color: grey;
    font-weight: 400;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location {
  
    font-size: 17px;
    
    }
    
  .bhs-photo-caption-block--category {
  
    -ms-grid-column-align: right;
    justify-self: right;
    
    }
       
  </style>
  
<div class="bhs-photo-caption-block">

  <div class="bhs-photo-caption-block--title">
  
    **Example Title**
    
    <span class="bhs-photo-caption-block--separator">
    
      |
      
      </span>
      
    <span class="bhs-photo-caption-block--location">
    
      Washington DC
      
      </span>
      
    </div>
    
  <div class="bhs-photo-caption-block--category">
  
    Photography: Word
    
    </div>
    
  </div>

If you're going to use photo captions under multiple images you can put the CSS into a different location. The CSS could go in a code block at the top of the page or Page Settings > Advanced. If you need it on multiple pages then Design > Custom CSS, minus the style tag.

I made a best guess at class names. Please change if needed to meet your needs.

Let us know how it goes.

Edited by creedon
updated CSS with some specific switches

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Can you share link to page in screenshot? We can check easier.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
13 minutes ago, creedon said:

Lining things up when h tags are involved can be a little tricky as they are block elements. I suggest a different tack by using CSS Grid.

1204857741_ScreenShot2020-09-11at3_29_48PM.thumb.png.93a428e751431af56ce9fc5b83b9501e.png

You can put the following into a code block like you've done and see how it looks.


<style>

  .bhs-photo-caption-block {
  
    align-items: baseline;
    display: grid;
    grid-template-columns: auto auto;
    
    }
    
  .bhs-photo-caption-block--title, .bhs-photo-caption-block--separator {
  
    font-size: 21px;
    
    }
    
  .bhs-photo-caption-block--title {
  
    font-weight: 900;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location, .bhs-photo-caption-block--separator {
  
    color: grey;
    font-weight: 400;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location {
  
    font-size: 17px;
    
    }
    
  .bhs-photo-caption-block--category {
  
    justify-self: right;
    
    }
    
  </style>
  
<div class="bhs-photo-caption-block">

  <div class="bhs-photo-caption-block--title">
  
    **Example Title**
    
    <span class="bhs-photo-caption-block--separator">
    
      |
      
      </span>
      
    <span class="bhs-photo-caption-block--location">
    
      Washington DC
      
      </span>
      
    </div>
    
  <div class="bhs-photo-caption-block--category">
  
    Photography: Word
    
    </div>
    
  </div>

If you're going to use photo captions under multiple images you can put the CSS into a different location. The CSS could go in a code block at the top of the page or Page Settings > Advanced. If you need it on multiple pages then Design > Custom CSS, minus the style tag.

I made a best guess at class names. Please change if needed to meet your needs.

Let us know how it goes.

Thanks for looking into this creedon. I also found an article that was explaining aligning different size fonts next to each other, and yes, I'm realizing it's complicated. This is the article I found, I'll check out yours too. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

I'm not sure this is a proper solution, but I solved it by adjusting line-height for the grey word. 

I'll check out your code and see if it helps, thanks!

See my code:

<h2 style="
           display: inline; 
           font-weight: bold;
           "> Little Peek
</h2>
<h2 style="
           display: inline; 
           "> |
</h2> 
<h2 style="
           display: inline;
           font-size: 17px;
           line-height: 31px;
           vertical-align: bottom;
           color: grey;
           ">Washington DC
</h2>

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...