가변 너비의 부동 요소를 수평으로 중앙에 배치하는 방법은 무엇입니까?
가변 너비의 부동 요소를 수평으로 중앙에 배치하는 방법은 무엇입니까?
편집 : 나는 이미 div부동 요소 width에 대한 포함을 사용하고 컨테이너에 대해 지정 (그런 다음 margin: 0 auto;컨테이너에 사용) 을 사용 하여 작업하고 있습니다. 포함하는 요소를 사용하지 않고 또는 적어도 포함하는 요소에 대해을 지정하지 않고도 수행 할 수 있는지 알고 싶었습니다 width.
플로팅되고 중앙에 배치 될 요소가 a div와 함께 있다고 가정합니다 id="content".
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
그리고 다음 CSS를 적용하십시오 .
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
이에 관한 좋은 참고 자료 가 있습니다.
.center {
display: table;
margin: auto;
}
DIV가로 중앙에 원하는 것을 가지고 있다고 가정하십시오 .
<div id="foo">Lorem ipsum</div>
CSS에서 다음과 같이 스타일을 지정합니다.
#foo
{
margin:0 auto;
width:30%;
}
이는 위쪽 및 아래쪽 여백이 0 픽셀이고 왼쪽 또는 오른쪽에서 균등해야하는 양을 자동으로 계산합니다.
너비가 100 %가 아닌 한 너비에 무엇을 넣느냐는 중요하지 않습니다. 그렇지 않으면 당신은 아무것도 중심에 두지 않을 것입니다.
그러나 왼쪽 또는 오른쪽으로 플로팅하면 페이지의 정상적인 요소 흐름에서 벗어나 자동 마진 설정이 작동하지 않기 때문에 베팅이 해제됩니다.
에 fit-content값을 사용할 수 있습니다 width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
참고 : 최신 브라우저에서만 작동합니다.
여기에서 널리 사용되는 답변은 때때로 작동하지만 다른 경우에는 다루기가 어려운 수평 스크롤 막대를 만듭니다. 특히 넓은 수평 탐색 및 큰 풀다운 메뉴를 처리 할 때 그렇습니다. 다음은 이러한 경우를 방지하는 데 도움이되는 더 가벼운 버전입니다.
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Can't you just use display: inline block and align to center?
ReferenceURL : https://stackoverflow.com/questions/1232096/how-to-horizontally-center-a-floating-element-of-a-variable-width
'IT TIP' 카테고리의 다른 글
| Android : dialogfragment가 표시되는지 확인하는 방법 (0) | 2020.12.26 |
|---|---|
| Swift를 사용하여 앱 델리게이트에서 뷰 컨트롤러 열기 (0) | 2020.12.26 |
| 목록이 Java로 정렬되었는지 확인하는 방법은 무엇입니까? (0) | 2020.12.26 |
| Heroku에서 Postgres DB 삭제 (0) | 2020.12.26 |
| Android : 터치 이벤트가 뷰에서 그 아래에있는 뷰로 전달되는 것을 방지하는 방법은 무엇입니까? (0) | 2020.12.26 |