0

In 2010 SharePoint I used the following code to center align my webparts:

<style>
.s4-wpTopTable {
margin-left: auto;
margin-right: auto;
}
</style>

This no longer works in 2013. Can anyone help?

Thanks

4
  • what's your web part type ? is it visual web part or build it web part like CQWP ... etc Commented Aug 24, 2016 at 16:32
  • Visual web-parts. They all used to work using the code above, something has changed Commented Aug 25, 2016 at 8:07
  • did you turn off the Minimal Download Strategy site feature? (Settings (gear) > Site Settings > Manage site features > Minimal Download Strategy > "Disable"
    – Chris G
    Commented Jan 2, 2018 at 21:07
  • This code is not working in SharePoint 2013. Commented May 22, 2018 at 7:29

3 Answers 3

1

I realize I'm late to the party, but for anyone else interested....

There're a few reasons, off the top of my head, that your CSS isn't working now:

  1. You're referencing the wrong class (Classes could've changed if you've changed master pages, deleted and replaced the web-part, or accidentally deleted the class in the HTML). Check this out via the F12 Dev screen.
  2. Your CSS isn't being referenced. If you're running off of an external file rather than script-editor web part, you may have forgotten to add the CSS file reference. This would be done with <link rel="stylesheet" href="~Path/To/styles.css"> inside either a script editor or in the masterpage iteself.
  3. The specificity of your CSS is too low. In essence, the most specific, most recent declaration of CSS is applied. Check out this --LINK-- to learn more.

If you're sure its not any of these, you could try another aligning feature that's possibly a bit overkill in terms of functionality...

.MyCentreClassParent {
    position: relative;
}
.MyCentreClassParent .s4-wpTopTable {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

Here's a --LINK-- if you want to play around with it a bit more. To support other browsers you need to add the transform function a few more times and add the (-ms-, -webkit-, -moz-, -o-) prefixes.

0

Make sure you are using the correct tab for the web part (eg. it may not be s4-wpTopTable) , and then try playing around with the margin-left property, adjust it by pixel in your browser's developer tools by applying margin-left as an inline-style, then once you have the right number of pixels, you can input that number into the code.

4
  • When I use developer tools to inspect the code, I cannot find s4-wpTopTable as I used to be able to. But I cannot find any other object name. Commented Aug 25, 2016 at 9:50
  • What do you mean you can't find any other object name? Use the Select Tool so that when you hover over objects it's highlighted, then when you click the desired object, it expands it in the page's source code.
    – user54272
    Commented Aug 25, 2016 at 12:36
  • In sharepoint 2010, there is this line to show that the object is s4-wpTopTable: <table class="s4-wpTopTable" style="width:800px" border="0" cellpadding="0" cellspacing="0" width="100%"> But the code is completely different and it doesnt use table class anymore. Commented Aug 25, 2016 at 14:07
  • Well I would suggest finding the appropriate class for the webpart, or even modifying the web part itself
    – user54272
    Commented Aug 25, 2016 at 14:15
0

I have experienced the same on SharePoint(SP) 2016 that the .s4-wpTopTable class is no longer used. So I have created the below snippet to center all webparts on the sharepoint form page in content editor webpart or script webpart. I hope it also works on SP 2013.

1. In case of jQuery Library is loaded. Center all webparts on the page.

<style>
.centerwebparts{
 margin-left: auto;
 margin-right: auto;
}
.setwebpartwidth {
 width: 700px !important;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready(function() {
        $('[id^="WebPartWPQ"]').addClass('centerwebparts setwebpartwidth');
});
</script>
  1. In case of jQuery Library is not loaded. Thanks to KGlasier's advise which I had to modify further to center all webparts on the page.
<style>
 .centerwebparts{
  margin-left: auto;
  margin-right: auto;
  }
  .setwebpartwidth {
   width: 700px !important;
  }
</style>
<script>
   document.addEventListener("DOMContentLoaded", function(){
    var list = document.querySelectorAll('[id^="WebPartWPQ"]');
         for (var i = 0; i < list.length; i++) {
              list[i].classList.add("centerwebparts", "setwebpartwidth");
         }
   });
</script>
  1. In case of jQuery Library is not loaded. Thanks to KGlasier's advise which I had to modify further to center the form content New/Edit/Display forms.
<style>
 .centerwebparts{
  margin-left: auto;
  margin-right: auto;
  }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[id^="WebPartWPQ"] > table').classList.add('centerwebparts');
});
</script>
1
  • I'd suggest using document.querySelector('[id^="WebPartWPQ"]').classList.add('centerwebparts') instead of adding jQuery... It's large and modern JavaScript makes it outdated.
    – KGlasier
    Commented Nov 21, 2019 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.