>  Q&A  >  본문

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

<p>세 개의 HTML 개체가 있고 컨테이너 div의 왼쪽에 이전 버튼, 오른쪽에 다음 버튼, 중간에 범위를 배치하고 싶습니다. </p> <pre class="brush:php;toolbar:false;"><이전><다음></pre> <p><br /></p> <pre class="snippet-code-css lang-css Prettyprint-override"><code> #btn이전 { 왼쪽으로 뜨다; } #spanStage { 글꼴 두께:굵게; 수직 정렬:가운데; } #btn다음 { 플로트:오른쪽; }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code> <input type="button" value="이전" id="btn이전"/> <span id="spanStage">5단계</span> <input type="button" value="Next" id="btnNext"/> </div></code></pre> <p><br /></p>
P粉431220279P粉431220279448일 전513

모든 응답(2)나는 대답할 것이다

  • P粉448130258

    P粉4481302582023-08-22 14:19:58

    "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

    회신하다
    0
  • P粉798010441

    P粉7980104412023-08-22 11:43:33

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

    으아악

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

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

    JSFiddle 데모

    회신하다
    0
  • 취소회신하다