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

Question

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?

Unfair

By the way, registration seems broken with Chrome on that page. Nothing happens if I click the Register button, with and without JavaScript. – Titled

Fascinating! I'm using Chrome and it works fine for me. What account type are you using? Google, Facebook, Twitter? – Unfair

myopenid. I'm 100% it won't work in google chrome if JavaScript is turned off. The button hasn't even a form, and isn't a submit button anyways. – Titled

Ah, I see. I haven't check all possible logins. Thank you for that note. Otherwise, I would have never known. The application is heavily dependent on Javascript, so being unable to register without JS is fine. However, I should make note of that somewhere if a user does not have JS activated. Thank you. – Unfair

One more thing: Your project sounds interesting, so I visited its website. The developer page states "The Veda Project is open source, (...)", but I can't find a link to a github (or any other) repository. Why don't you add one? And, no offense, but having a donate page while the project is really just a business card makes it look like a scam. And why is the donation page's country preset to the US instead of the country my IP is from? – Titled

@Titled Once again some great points. Yes, the donation page needs to be set to the IP address instead of just assuming everyone is from the US. I'll put that on my to-do list. Didn't think that it would look like a scam. Re: open source, I haven't put it up on Google Code or Github yet. No one actually ever visits the webpage--at least not yet--so I didn't really think about it. I'll do that in about a week or two. Are you at all interested in contributing? I could truly use the help. – Unfair

I sent two mails to [email protected] . The gist: feel free to contact me. – Titled

Answer 1

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

Here's a demo.

Titled

This is a great idea and it works if I set display: block but then then the element takes up the width of its container or I'd have to set the width manually but I don't know what the width will be. It doesn't work if the element is set as inline-block. The reason why it needs to be inline-block is so that its width is dynamic to its contents. Thanks for the great idea though. If you can alter it such that it works for inline-block that would be perfect. – Unfair

@Vivek Viswanathan Could you elaborate why "It doesn't work if the element is set as inline-block"? Added a link to a demo page. – Titled

That seems to work because text-align: center is set on the parent element. However, I cannot do that in my code because the inline-block element has siblings that cannot be centered. Thanks again for your help on this. – Unfair

@Vivek Viswanathan Well, can't you then pack just the formula into a special display:block; container on its own? That container will occupy 100% of the width, but that shouldn't be a problem, or is it? – Titled

Answer 2

Another way to do this (works for block element also):

.center-horizontal {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
}

Explanation: left:50% will position the element starting from the center of containing parent, so you want to pull it back by half of its width with transform: translateX(-50%)

Note1: Be sure to set the the position of containing parent to position: relative; if the parent is absolutely positioned put a 100% width and height, 0 padding and margin div inside it and give it position: relative

Note2: Can also be modified for vertical centering with

top:50%;
transform: translateY(-50%);

Nydia

this one is awesome! – Pocket

You don't need absolute positioning and can use margin: 50%; – Locket

You don't need absolute, but left/right won't work if the position is static (default elements' positioning). If absolute is not a specific need, you should use relative – Godsey

Wish this were the accepted answer because current accepted explains how to center the inline contents of an element. This explains how to center a specific one. – Ado

using margin in some cases creates overflow, in my specific use case it was creating horizontal scrollbars the distance of half the elements's width. Using position fixed the issue. – Recurrent

Answer 3

A little late, but similar to Ivek's answer, you can avoid using the position declaration by using margin-left rather than left, so:

margin-left: 50%; transform: translateX(-50%);

Marcello

What about if you want to center multiple wrapping elements, as long as there is enough space? Intuitively, I thought adding margin-right: -50% would do it. But then, for reasons unknown, your translation of -50% appears as too much. Smaller values for the translation can come close to producing a centered result, but vary between Chrome, Firefox and Edge. Fiddle: jsfiddle.net/dgqs18wL/63 – Dunker

Answer 4

You can do this by changing it to a block element and using max-content:

.element {
  display: block; /* Change from inline-block to block */
  margin-inline: auto;
  width: max-content;
}

Using width: fit-content will also work.

Angelo

Answer 5

my way, i wrap the inline-block element with other div, e.g. wrapper, and then its magically centered, if not then give margin auto or something to the wrapper class

Peppercorn