인라인 블록 요소를 가운데에 배치 할 수 있습니까? 그렇다면 어떻게해야합니까?

Question

처음에는 알 수없는 너비의 요소, 특히 사용자가 제공 한 MathJax 방정식을가집니다. 요소의 너비가 내용에 맞는지, 정의 된 너비를 가지도록 요소를 인라인 블록으로 설정했습니다. 그러나 이는 기존의 센터링 방법을 방해합니다.

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

을 그리고 해결책이 될 수 없다 : 즉, 다음은 작동하지 않습니다

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

을 나는 폭이 실제로 사전 방정식에 사용자가 클릭하면해야 무슨 생각이 없기 때문에, 전체 수식을 강조 표시해야하므로 너비를 0으로 설정할 수 없습니다. 누구나이 방정식을 중심으로하는 솔루션을 갖고 있습니까?

Answer 1

단순히 컨테이너에 text-align: center;을 설정하십시오.

Here's a demo.

Answer 2

이 작업을 수행하는 또 다른 방법은 (또한 블록 요소 작동) :

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

설명 : 왼쪽 : 당신이 하려는, 그래서 50 %, 부모를 포함하는의 중심에서를 시작 요소를 배치합니다을 해당 폭의 절반만큼 뒤쪽으로 당깁니다. translateX (-50 %)

주 1 : parent를 포함하는 위치를 position : relative로 설정하십시오.

주 2 상대 : 상위 절대적 안에 100 %의 폭과 높이, 0 패딩 마진 DIV두고 그것의 위치를 ​​부여에 위치하는 경우도

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

Answer 3

작은으로 센터링 수직에 대해 변형 될 수있다 늦었지만 Ivek의 대답과 비슷한, 그렇게, leftmargin-left를 사용하는 대신하여 position 선언을 사용하여 피할 수 있습니다 : 그런데

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