Center Monarch Inline Share Button via CSS

A quick and easy way to custom align the share button

December 10, 2020


As of this writing, the version of Divi’s Monarch plugin (1.4.13) does not include a way to align the Inline share buttons centered on the targeted page or post (among others) where its instance will be shown. Some custom CSS lines of codes help enable that missing alignment option.

Please note: Some of the links below are affiliate links, meaning, at no additional cost to you, I will earn a commission if you click through and make a purchase.

Topic Keywords:

  • Cascading Style Sheets (CSS)
  • Child Theme
  • Theme Customizer

Down with the Details

The default configuration of Monarch’s inline share button is set to align left as shown on the following screenshot.

monarch inline share aligned left by default

To adjust horizontal alignment and center it on the layout, add the following CSS codes either on your child theme’s style.css OR via the WordPress Dashboard > Divi > Theme Customizer > Additional CSS as shown on the screenshot right after the code snippets below.


.et_monarch .et_social_4col li {
width: 23.5%;
display: inline-block;
float: none;
.et_monarch .et_social_networks .et_social_icons_container {
padding-top: 50px !important;
margin-top:30px !important;
ul.et_social_icons_container:before {
content: “SHARE THIS”;
color: #048bfe;
position: absolute;
top: 0;
left: 0;
right: 0;
font-family: ‘Raleway,Arial’;
font-size: x-large;
font-weight: 300;

Check out how it was applied right below this post and at the lower area of other pages on our website. Please share if you find this helpful.

About this Post

The topic posted above is the result of some work done for clients in the past that required customizations. The codes were discovered after doing source code inspections, trying out various CSS code snippets and coordination with Elegantthemes – the creators of Monarch Plugin and Divi Theme – for further advice whenever necessary.