Is it possible to center an inline-block element and if so, how?

css mathjax
Deets McGeets picture Deets McGeets · Sep 29, 2011 · Viewed 89.3k times · Source

I have an element of initially unknown width, specifically a MathJax equation supplied by the user. I have the element set as inline-block to ensure that the width of the element fits its contents and so that it has a defined width. However, this prevents traditional methods of centering. That is, the following does not work:

.equationElement
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

And the solution cannot be:

.equationElement
{
    display: block;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

Because I have no idea what the width should actually be beforehand and if the user clicks on the equation, I need the entire equation highlighted, so I cannot set the width to 0. Does anyone have a solution to centering this equation?

Answer

phihag picture phihag · Sep 29, 2011

Simply set text-align: center; on the container.

Here's a demo.

Related questions

using element's own (not parent's) width for calculation or percentage in css, without javascript

I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare position:relative and set negative margin values roughly equal …

Read More
Styling MathJax

I'm so confused about this. I've searched for tutorials but can't find any that make much sense to me, how do I set a CSS class for MathJax output? I just want to make the font big. The current include …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More