Cannot figure out how to center div in Wordpress theme [closed]

Question

good people,

I'm a Wordpress / webdev newbie trying to help out a local small business. The owner wants the text on the homepage centered and I cannot for the life of me figure out how to do this. The website is: www.norcalaviationservices.com

Using the inspection tool I have found that I can use the classes .post-14 and .entry-content. I don't know what the best class/ID is to use, but these both seem to the same effect. I have implemented numerous strategies I have found including:

/* only indents text slightly on page */  
display: table;  
margin-right: auto;  
margin-left: auto;  

and:

/* Intersects following div! */  
position: absolute;  
left: 50%;  
transform:translateX(-50%);  

and:

/* Also intersects! */  
margin: auto;    
position: absolute;  
left:0;  
right: 0;  
top: 0;  
bottom: 0;  

Along with numerous others I found that created significant problems or didn't work at all. I think maybe the root of the problem is that I don't understand what is forcing the text to the left-- I've spent a lot of time digging around the CSS and the code inspector tool and I cannot for the life of me figure out what code is telling the text or div to display the way it is displaying.

If anyone could either give me a solution or point me in the right direction so I can figure one out for myself I would be very grateful.

Many thanks, Ricky

Answer 1

As mentioned in my comment, http://howtocenterincss.com/ is a great resource to get the necessary CSS to horizontally or vertically center containers or paragraphs in CSS.

Since you mentioned the text should be centered, the wbesite would give you this solution:

<div style="text-align:center;">Text Content</div>

If you want to center a container instead, margin-right: auto; margin-left: auto; works fine too, but you need to set a width and make sure the element is not floated.

Looking at your site, the main problem you're facing seems to be that your theme uses a grid system and the content only covers 8 of 12 columns in that grid:

There's two things you can do:

1. Create a child theme and override the HTML to use the class col-1-1 instead of col-8-12. Then, use text-align: center to horizontally center the text only.

2. Keep the col-8-12 class and set float: none; margin: 0 auto; for that element, e.g. using the .home #main .col-8-12 selector. You can do that via the customizer or in your child theme's CSS file.