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
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
可以是left
、right
、center
或justify
.