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

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

---

처음에는 너비를 알 수없는 요소, 특히 사용자가 제공 한 MathJax 방정식이 있습니다. 요소의 너비가 내용에 맞는지 확인하고 정의 된 너비를 갖도록 요소를 인라인 블록으로 설정했습니다. 그러나 이것은 전통적인 센터링 방법을 방해합니다. 즉, 다음은 작동하지 않습니다.

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

그리고 해결책은 다음과 같을 수 없습니다.

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

너비가 실제로 무엇인지 미리 알지 못하기 때문에 사용자가 방정식을 클릭하면 전체 방정식을 강조 표시해야하므로 너비를 0으로 설정할 수 없습니다.이 방정식을 중앙에 배치하는 솔루션이 있습니까?

---

text-align: center;용기에 설치하기 만하면됩니다 .

여기에 데모가 있습니다.

---

이를 수행하는 또 다른 방법 (블록 요소에서도 작동) :

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

설명 : left : 50 %는 포함하는 부모의 중심에서 시작 하여 요소를 배치 하므로 transform : translateX (-50 %)를 사용하여 너비의 절반 만큼 뒤로 당기고 싶습니다 .

참고 1 : 상위 포함 위치를 position : relative; 부모가 절대적으로 위치하는 경우 100 % 너비와 높이, 0 패딩 및 여백 div를 그 안에 넣고 위치를 지정하십시오.

참고 2 : 수직 센터링을 위해 수정 가능

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

---

조금 늦었지만 Ivek의 대답과 비슷하게을 사용하여 position선언을 사용 margin-left하지 않을 수 있습니다 left.

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

참조 URL : https://stackoverflow.com/questions/7601678/is-it-possible-to-center-an-inline-block-element-and-if-so-how