Jump to content

How can I center align text in a markup block?

Recommended Posts

I am using a markup block to create some text content with different formatting than the typography styles I am currently using in the style editor. Everything I have set in the custom CSS menu is correctly targeting the markup block text, aside from the 'text-align' property. No matter the setting, the text remains left justified. I would like it to be centered justified, however. Below is the CSS I am using:


scenario {
   font-style: normal;
   text-align: left;
   font-weight: 300;
   font-size: 20px;
   line-height: 1.8em;
   color: #2e4259;
}

Any thoughts on why this text refuses to center align would be greatly appreciated!

Link to comment
  • Replies 5
  • Views 16.7k
  • Created
  • Last Reply

I don't think you are setting up these blocks correctly. You need to use div id's or classes and then place your content within those, something like this:

You'd add a 'Markup Block' and then add this HTML:


<div class="scenario">
 <p>Here is some paragraph content</p>
 <ul>
   <li>Here is an unordered list item</li>
   <li>and another<li>
 </ul>
</div>

And then your custom CSS would be:


.scenario {
   font-style: normal;
   text-align: left;
   font-weight: 300;
   font-size: 20px;
   line-height: 1.8em;
   color: #2e4259;
   text-align: center;
}

Try changing your HTML / CSS to that and see if it helps.

Link to comment

@kale, that saved the day! Indeed, my HTML in the markup block was just . Your answer here helped answer several other questions of mine about using the markdown blocks. Thanks again for helping out!

Link to comment
  • 1 month later...

@kale

Hi

My Markdown block currently contains the following HTML, how can I adapt it to centre align?

Or, give us a call on&nbsp+233 (0)30 277 2234

Ideally I would also like to use an RGB colour code instead of the standard blue which it is right now

thanks!

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.