I've a content editor webpart with a linked js that display a searchbox. I'd like center my webpart in the page

Here is the html in my js file

<div style="display:table; margin:0 auto;width:100%">
    <div style="float:left">
        <input type="text" id="tbSearch" name="tbSearch" class="ms-sbplain" style="width: 368px;" onkeydown="if (event.keyCode == 13){launchSearch();return false;}">
    <div style="float:left;border-width: 1px; border-style: solid; border-color: #c3c3c3; border-left-width:0 ">
        <img  onClick="launchSearch();return false;" title="Search" class="srch-gosearchimg" onmouseover="this.src='\u002f_layouts\u002fimages\u002fgosearchhover30.png'" onmouseout="this.src='\u002f_layouts\u002fimages\u002fgosearch30.png'" alt="Search" src="/_layouts/images/gosearch30.png"/>

You could wrap the contents of your content editor web part in a div and apply styling/attributes to the div to center it on the page.

  • i edited my post to show you my html – user1898765 Dec 5 '14 at 12:50
  • 1
    You can modify the content. You have width set to 100% - give it a defined width in order for the margin auto setting to work and center the content inside the web part. The other method is to override the style for the content editor web part - look at the element inspector in browser tools and you can get the ID and classes being used. – Jesus Shelby Dec 5 '14 at 13:27

You should be able to get the ID of the Search Web Part and then use the align center code.


align Attribute

  • Where do i put this attribute? i see nothing in html edit source on page – user1898765 Dec 5 '14 at 11:05
  • After you have wrapped the webpart in a div like this: <div align="center" style="border:1px solid red"> Searchbox </div> or you could use javascript to add the align attribute to the searchbox. – Vince2322589 Dec 8 '14 at 5:51

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.