1

how do I center a webpart, specifically an excel web access webpart?

I am using a webpart to display an excel chart, which is required to be on the center of the page rather than left justified which is the default. sharepoint 2013 sp1, farm, team subsite of site collection.

I have tried different style settings to no effect. the page has 4 excel web access webparts. the code snippet shows all of the html for the page.

    <div style="text-align: center;">
   <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false" unselectable="on">
      <div class="ms-rtestate-notify  ms-rtestate-read 93cf69f4-a493-44b3-a8cb-5feefac3df84" id="div_93cf69f4-a493-44b3-a8cb-5feefac3df84" unselectable="on">
      </div>
      <div id="vid_93cf69f4-a493-44b3-a8cb-5feefac3df84" unselectable="on" style="margin-right: auto; margin-left: auto; display: none;">
      </div>
   </div>
</div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
   <div class="ms-rtestate-notify  ms-rtestate-read 49395fc1-f29d-475a-b5b2-6eedeb690f9a" id="div_49395fc1-f29d-475a-b5b2-6eedeb690f9a" unselectable="on">
   </div>
   <div id="vid_49395fc1-f29d-475a-b5b2-6eedeb690f9a" unselectable="on" style="display: none;">
   </div>
</div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
   <div class="ms-rtestate-notify  ms-rtestate-read f4722e9a-5dbe-4232-a520-1a2b9f17d209" id="div_f4722e9a-5dbe-4232-a520-1a2b9f17d209" unselectable="on">
   </div>
   <div id="vid_f4722e9a-5dbe-4232-a520-1a2b9f17d209" unselectable="on" style="display: none;">
   </div>
</div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
   <div class="ms-rtestate-notify  ms-rtestate-read ca439fd0-d3e8-4c2e-a3e6-17e22a8b569e" id="div_ca439fd0-d3e8-4c2e-a3e6-17e22a8b569e" unselectable="on">
   </div>
   <div id="vid_ca439fd0-d3e8-4c2e-a3e6-17e22a8b569e" unselectable="on" style="display: none;">
   </div>
</div>
2

An easy way to do this without having to use any code would be to use a wiki page and insert a table with three columns. Place the web part in the middle column and adjust the widths of each column as necessary. All of this can be done within the edit page.

If you want to go another route you can use a script editor to change it via css. In your code above you are trying to change text-align. That won't work if you are trying to center the web part. Instead you will want to use margin-left and margin-right. I would try setting them both to auto first and then play with it from there if that doesn't get you what you want.

  • margin-left helped me accomplish what I wanted on the cheap, but I don't have an exact centering - which for my purposes is ok. to do true centering requires obtaining the container, which is not available at design time, and adding the align="center" element. I had no luck with auto, so hard coded the margin. also, sharepoint kept stripping my style element. I finally got it to stick. thanks for the help. – tony bonn Feb 19 '15 at 2:14
2

Add Web Part > Media and Content > Script Editor > Paste the following: (change the max-width to anything you want. I used this to center a discussion board with my custom content.)

.ms-webpart-chrome-fullWidth { max-width: 1223px !important; min-width: 0% !important; margin: auto !important; display: block !important;
}

1
  1. You can add table with 1 row and 1 column.
  2. Then insert your web part as app.
  3. Click view source code, wrap table around one div. This div will act as container for table.
  4. In table tag, mention "align" attribute with "center" value.
  5. Save page.
   <div>
       <table align="center">
           <tr>
              <td>
                    //Your app web part code here
              </td>
           </tr>
       </table>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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