Jump to content

Centering Text Vertically and Horizontally

Recommended Posts

Site URL: https://www.j3athletics.com/od-trial

I have a page with 3 blocks going across.  I've designed each one to my liking so far but cannot figure out how to get the text to be centered vertically in each box.  Each box is a fixed size.  I've tried nearly everything I could find on the web (margins, absolutes, etc) and cannot seem to make it work.

Page is j3athletics.com/od-trial

Example code in the markdown box (this would be the top left box on the page)

<div class="LightBoxBorder">
Time: 15 Minutes<br><br>
Equipment: Single Dumbell
</div>

CSS Code for the formatting (put in the CSS Design code)

.LightBoxBorder 
 {border: 2px solid #11294b;
  background: #00B3FA;
  color: #11294b;
  padding: 20px 20px; 
  height: 175px;
  width: 260px;
  text-align: center; }

 

Hopefully, I'm missing something very simple here to align the text within the box vertically (as well as horizontally centered which is done).

I'd also like to add a thin blue line under each row of boxes to act as a visual separator.  I know how to add a line into the page without code, but the padding on that is just way too much.  I'm looking to keep the spacing to just larger than it is now between the rows.

If it matters, I'm on version 7.0, bedford family template.

Link to comment
  • Replies 3
  • Views 4.3k
  • Created
  • Last Reply

Text looks centered in the box to me,  and it the text in the paragraph is centered not left or right justified. 

Adjusting a line padding/margins: custom css, you can adjust the numbers. 

hr { margin-top: 10px; margin-bottom: 10px } 

Changing color of line, site wide you can use a custom css color if you wish use the #number and replace "blue"

https://www.hexcolortool.com/#000000

.sqs-block-horizontalrule hr { background-color: blue; }
Link to comment
54 minutes ago, derricksrandomviews said:

Text looks centered in the box to me,  and it the text in the paragraph is centered not left or right justified. 

Adjusting a line padding/margins: custom css, you can adjust the numbers. 


hr { margin-top: 10px; margin-bottom: 10px } 

Changing color of line, site wide you can use a custom css color if you wish use the #number and replace "blue"

https://www.hexcolortool.com/#000000


.sqs-block-horizontalrule hr { background-color: blue; }

It's centered horizontally but not vertically.  I want any amount of text to be centered both ways.  The boxes in the middle seem centered just because the amount of text is the perfect amount for the box size.  The text in the left box is towards the top of the box.

Link to comment

Archived

This topic is now archived and is 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.