Centering within a div CSS/HTML

Django x2 · 8 Aug 2012 at 12:14

I want to center a SharePoint search box. In SP Designer, if you add a tab prior to the box, it adds a <div style> box. Putting margin-left:auto;margin-right:auto; here doesn't center the object.

Given that this is within SharePoint, I can't just hack about with the css and add ids where I like. I guess I can inline CSS, but nothing I've tried seems to work.

Any ideas?

Tripnologist · 8 Aug 2012 at 13:17

margin auto will only work if you have a set dimension for the width.

Django x2 · 8 Aug 2012 at 13:43

which we can't do really as that would mean defining a screen size. i.e. 800px on a 1400x900 screen is different to a 1024x768 res, etc.

Div align is not valid in SharePoint either as it does not meet the strict transitional type

webhound · 8 Aug 2012 at 14:21

cant you use % width?

Tripnologist · 8 Aug 2012 at 15:24

Lucero said:
which we can't do really as that would mean defining a screen size. i.e. 800px on a 1400x900 screen is different to a 1024x768 res, etc.

I'm a little confused as to what you're trying to do then.
If the div you're wanting to center does not have a specified width, that means that it will auto size to 100% of the viewport, in which case there is nothing to center. If you're just wanting some spacing on either side of the screen, you could use a % margin so it'll vary according to screen size.

spengos · 9 Aug 2012 at 12:04

If the content of the box is inline then why not just use text-align on the container?
Then you don't need to worry about widths.

<div style="text-align:center;">
<button>SEARCH BOX HERE</button>
</div>