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

Centering Text Vertically and Horizontally

Question

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.

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0
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.

Share this post


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...