방정식이 HTML (정렬 문제)에 표시되었습니다.

방정식 번호와 함께 표시된 방정식을 HTML로 typeset하려고합니다.방정식이 HTML (정렬 문제)에 표시되었습니다.

결과는 라텍스 표시된 수식 조판 얼마나 유사하게하기위한 것입니다

<p>some text 
<span style="display: block"> 
    <span>(1.7)</span> 
    <img alt="[some equation]" src="img.png"> 
</span> 
some more text.</p>

방정식의 수와 방정식을 이미지로 렌더링, 수식 번호가 텍스트로 제공됩니다 수식은 즉 중간에 (1.7)의 가운데가 수직 가운데에 있어야합니다. 나는 vertical-align: middle을 사용하여 이것을 달성 할 수있다.
수식 이미지는 주변 단락의 너비 내에서 수평 중심에 있어야합니다. 나는 text-align: center을 사용하여 이것을 달성 할 수있다.
방정식 번호의 왼쪽 가장자리는 주변 단락의 왼쪽 가장자리와 수평으로 정렬되어야합니다. float: left을 사용하여이를 달성 할 수 있지만 수직 정렬을 깨뜨리는 대가를 치룰 때만 가능합니다.

내가 얻을 수 있습니다 수직 또는 수평 정렬 오른쪽 (this jsfiddle 참조)하지만 동시에 작업하는 수평 및 수직 정렬을 모두 가져 오지 못했습니다. 방정식 번호를 올바르게 표시하려면 어떻게해야합니까?

결과는 다른 전자 책 리더에게 이식 될 수 있으므로 JavaScript를 사용하여 주변을 이동시킬 수는 없습니다.

출처

2016-09-22 jochen

나는 코드를 몇 가지 변경했습니다. 이 부분을 참조하십시오 JSFiddle

.displayed { 
    margin: 1ex auto; 
    display: table; 
    text-align: center; 
    width: 100%; 
} 

.eqn { 
    vertical-align: middle; 
} 

.eqno { 
    display: table-cell; 
    text-align: left; 
}

이 정보가 도움이되기를 바랍니다.

어 렌더 더

출처

2016-09-23 02:34:53 Amrinder

방정식이 HTML (정렬 문제)에 표시되었습니다.

답변

관련 문제