div에서 HTML 요소의 가로 정렬 구현

Question

세 개의 HTML 개체가 있고 컨테이너 div의 왼쪽에 이전 버튼, 오른쪽에 다음 버튼, 중간에 범위를 배치하고 싶습니다.

<이전><다음>

<code> #btn이전
    {
        왼쪽으로 뜨다;
    }
    #spanStage
    {
        글꼴 두께:굵게;
        수직 정렬:가운데;
    }
    #btn다음
    {
        플로트:오른쪽;
    }</code>

<code>
        <input type="button" value="이전" id="btn이전"/>
        <span id="spanStage">5단계</span>
        <input type="button" value="Next" id="btnNext"/>
    </div></code>

Answer 1

"display:flex" 스타일은 이러한 요소를 같은 줄에 유지하는 좋은 방법입니다. div에 어떤 ​​유형의 요소가 있는지는 중요하지 않습니다. 특히 입력 클래스가 양식 제어인 경우 부트스트랩, 인라인 블록과 같은 다른 솔루션은 제대로 작동하지 않습니다.

예:

으아아아

Flexbox에 대한 자세한 내용: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

플렉스 방향: 행, 열

justify-content: flex-end, center, space-between, space-around

정렬 항목: Stretch, flex-start, flex-end, center

Answer 2

부동 위치가 아닌 모든 하위 요소의 수평 정렬을 설정하려면 래퍼에 text-align: center를 추가하세요.

으아악

<span>默认为内联元素。因此，您可以在它们上使用display:block并适当地对其进行样式设置，或者稍微调整父元素的样式。由于除了<span>和<button> 외에는 다른 하위 요소가 없으므로 이 간단한 솔루션을 사용하는 것이 더 좋습니다.

참고하세요 text-align:<value>会从父元素继承，因此如果您想在包装器中包含其他内容，应该检查text-align:center是否适合您。否则，在特定元素中使用text-align:<value>，其中value可以是left、right、center或justify.

JSFiddle 데모