1

I was wondering if there was a way to center align a Search Box web part in SharePoint 2013 using CSS.

Google searches show me similar unanswered questions, or questions with answers that do not work (e.g. How to center align a web part).

1

Much depends on your webpart zone layout, but I'll think you could do something like this:

<style type="text/css">
div#SearchBox {
    margin: auto;
    width: 50%;
    float: none;
}
</style>

However, if the small searchbox that is available on all the sites is present, the above CSS will mess it up as they use the same ID. So I would suggest to hide it from the same site where you have the Search box webpart.

#searchInputBox {
    display: none;
}

Another way is to apply CSS directly to the specific webpart ID. Use F12 to find the ID for the webpart and apply the CSS to it instead.

div#WebPartWPQ2 {
    width: 50%;
    margin: auto;
}

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.