Cannot Horizontally Center "Raw HTML" Element

Tagged: 

Author Posts

techinfusion November 15, 2019 at 7:49 am

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

I am trying to center 4 “Raw HTML” elements (as WPBakery likes to call them) horizontally on the mobile page. Attached is a screenshot. I’ve tried every type of centering and inline-block method I could think of. Nothing seems to work.

Here is the HTML code:

<a href="/filmography">
    <img src="http://new.christopherbessette.com/wp-content/uploads/2019/11/filmography.png" 
    onmouseover="this.src='http://new.christopherbessette.com/wp-content/uploads/2019/11/filmography_h.png'"
    onmouseout="this.src='http://new.christopherbessette.com/wp-content/uploads/2019/11/filmography.png'"
    border="0" alt=""/></a>

https://paste.pics/791KG

Things I can try to get this element centered up?

Sebastian November 15, 2019 at 11:38 am

Hey,

If you can post a link to the page I can give you more precise advice.

If you’re using flex, you should set display: flex on the direct parent of the element you want to center. And then use the justify-items property. So rather than setting flex on the button, set it on the container for the button.

You may also want to make sure the flex-direction is row if you are using justify-items – I see it’s currently set to column. The direction changes the effect of justify-items vs align-items. Our flexbox tutorial explains all this stuff: https://themeover.com/microthemer-flexbox/

I hope that helps. Please let me know if you’re still stuck.

Thanks,
Sebastian

techinfusion November 15, 2019 at 4:36 pm

Thanks for your help! I’ll try that!

Here is the page:
http://new.christopherbessette.com/

It is the mobile version of it.

You must login or register to reply to this topic.