"위치 : 절대"요소를 중앙에 배치하는 방법
속성이로 position설정된 요소를 중앙에 배치하는 데 문제 가 absolute있습니다. 이미지가 중앙에 있지 않은 이유를 아는 사람이 있습니까?
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
<li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
</ul>
</div>
</body>position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
배치 된 1 요소 의 width/ height를 알지 못해도 다음과 같이 정렬 할 수 있습니다.
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
CSS Transform 이 IE9 이상에서 지원 된다는 점은 주목할 가치가 있습니다. (간결성을 위해 공급 업체 접두사 생략)
설명
추가 top/ left의 50%상기 부모의 중간으로 이동하고 요소의 상위 / 좌측 여백 모서리 translate()와 함수 (네가티브) 의 값 -50%의 크기의 절반에 의해 이동시킨다 소자. 따라서 요소는 중간에 배치됩니다.
이는 top/ left속성 의 백분율 값 이 상위 요소 (컨테 이닝 블록을 생성하는)의 높이 / 너비에 상대적 이기 때문 입니다.
변형 함수 의 백분율 값 은 요소 자체의 너비 / 높이에 상대적입니다 (실제로는 경계 상자 의 크기를 나타냄 ) .translate()
단방향 정렬의 경우 translateX(-50%)또는 translateY(-50%)대신 사용하십시오.
1. position이외의 static. 즉 relative, absolute, fixed값.
absolute배치 된 무언가를 중앙에 두는 것은 CSS에서 다소 복잡합니다.
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
margin-left중앙에 배치하려는 요소 너비의 절반 (음수)으로 변경하십시오 .
수직 및 수평 정렬 중앙 분할
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
참고 : 요소는 설정할 너비와 높이가 있어야합니다.
간단한 CSS 트릭, 다음을 추가하십시오.
width: 100%;
text-align: center;
이것은 이미지와 텍스트 모두에서 작동합니다.
절대 요소를 중앙에 배치하려는 경우
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
컨테이너를 왼쪽에서 오른쪽으로 중앙에 배치하고 위에서 아래로 배치하지 않으려는 경우
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
왼쪽에서 오른쪽에 관계없이 컨테이너를 위에서 아래로 가운데에 배치하려는 경우
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
2015 년 12 월 15 일 현재 업데이트
몇 달 전에 또 다른 새로운 속임수를 배웠습니다. 상대 부모 요소가 있다고 가정합니다.
여기에 절대적인 요소가 있습니다.
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
이것으로 이전 솔루션보다 더 나은 대답이라고 생각합니다. 너비와 높이를 지정할 필요가 없기 때문입니다. 이것은 요소 자체의 내용을 조정합니다.
이것은 나를 위해 일했습니다.
position: absolute;
left: 50%;
transform: translateX(-50%);
"위치 : 절대"요소를 중앙에 배치합니다.
.your-element {
position: absolute;
left: 0;
right: 0;
text-align: center; // or this -> margin: 0 auto;
}
position : absolute 속성을 가운데로 설정하려면 left : 50 % 및 margin-left : div 너비의 -50 %를 설정해야합니다.
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
수직 중심 절대의 경우 상단 만 왼쪽이 아닌 동일한 작업을 수행해야합니다. (참고 : html 및 body는 최소 높이가 100 % 여야합니다.)
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
둘 다 결합 할 수 있습니다.
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
데모보기 : http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center; position: absolute추가 할 때 요소 와 함께 작동left: 0; right: 0;
더 간단하고 최고 :
img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
position: absolute;
}
그런 다음 다음과 같이 position : relative 속성을 사용하는 태그에 img 태그를 삽입해야합니다.
<div style="width:256px; height: 256px; position:relative;">
<img src="photo.jpg"/>
</div>
요소의 너비를 모르는 경우 다음 코드를 사용할 수 있습니다.
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
바이올린 데모 : http://jsfiddle.net/wrh7a21r/
출처 : https://stackoverflow.com/a/1777282/1136132
아마도 가장 짧은
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
나는 당신이 무엇을 성취하고 싶은지 잘 모르겠지만,이 경우 width: 100%;당신의 ul#slideshow li의지에 추가 하는 것만으로도 트릭을 할 수 있습니다.
설명
img태그는 인라인 블록 요소입니다. 즉, 텍스트처럼 인라인으로 흐르지 만 블록 요소와 같은 너비와 높이도 있습니다. CSS에는 및에 text-align: center;적용되는 두 가지 규칙 이 있습니다 (중복 btw 임). 이것은 모든 인라인 및 인라인 블록 자식 요소가 가장 가까운 블록 요소의 중앙에 위치하도록 만듭니다. 코드에서는 태그입니다. 모든 블록 요소에는 기본값 인 정적 흐름 ( )이 있습니다. 문제는 태그를로 지정 하면 태그를 정상적인 정적 흐름에서 빼내고 이로 인해 내부 콘텐츠에 맞게 크기가 줄어들게됩니다 . 즉, 속성 이 "손실" 됩니다.<body>#slideshowWrapperliwidth: 100%position: static;liposition: absolute;width: 100%
left: calc(50% - Wpx/2);W가 요소의 너비 인 곳을 사용하면 저에게 효과적입니다.
목록 항목이 중앙에 있지 않기 때문에 이미지가 중앙에 있지 않습니다. 텍스트 만 중앙에 배치됩니다. 전체 목록을 중앙에 배치하거나 목록 내에서 이미지를 중앙에 배치하여 원하는 위치를 지정할 수 있습니다.
코드의 수정 된 버전은 하단에서 찾을 수 있습니다. 내 개정판에서는 목록과 그 안의 이미지를 중앙에 배치합니다.
진실은 절대 위치로 설정된 요소를 중앙에 배치 할 수 없다는 것입니다 .
그러나이 동작은 모방 할 수 있습니다!
참고 :이 지침은 img뿐만 아니라 모든 DOM 블록 요소에서 작동합니다.
이미지를 div 또는 기타 태그 (귀하의 경우 li)로 둘러 쌉니다.
<div class="absolute-div"> <img alt="my-image" src="#"> </div>참고 : 이러한 요소에 지정된 이름은 특별하지 않습니다.
css 또는 scss를 변경하여 div 절대 위치와 이미지를 중앙에 제공하십시오.
.absolute-div { position: absolute; width: 100%; // Range to be centered over. // If this element's parent is the body then 100% = the window's width // Note: You can apply additional top/bottom and left/right attributes // i.e. - top: 200px; left: 200px; // Test for desired positioning. } .absolute-div img { width: 500px; // Note: Setting a width is crucial for margin: auto to work. margin: 0 auto; }
그리고 거기에 있습니다! 이미지가 중앙에 있어야합니다!
코드 :
이것을 시도하십시오 :
body
{
text-align : center;
}
#slideshow
{
list-style : none;
width : 800px;
// alter to taste
margin : 50px auto 0;
}
#slideshow li
{
position : absolute;
}
#slideshow img
{
border : 1px solid #CCC;
padding : 4px;
height : 500px;
width : auto;
// This sets the width relative to your set height.
// Setting a width is required for the margin auto attribute below.
margin : 0 auto;
}<ul id="slideshow">
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>도움이 되었기를 바랍니다. 행운을 빕니다!
상대 객체 내부의 절대 객체는 부모에 상대적입니다. 여기서 문제는 컨테이너에 대한 정적 너비가 필요 #slideshowWrapper하고 나머지 솔루션은 다른 사용자가 말하는 것과 같습니다.
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align:center;
width: 500px;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: relative;
left: 50%;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
다음은 "위치 : 절대"가있는 중앙 요소에 대한 쉽고 최상의 솔루션입니다.
body,html{
min-height:100%;
}
div.center{
width:200px;
left:50%;
margin-left:-100px;/*this is 50% value for width of the element*/
position:absolute;
background:#ddd;
border:1px solid #999;
height:100px;
text-align:center
}
<style>
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>이 방법으로 시도 할 수 있습니다.
* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative;
text-align: center;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg');
background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px;
display: inline-block; margin: auto; z-index: 999999; }<html>
<body>
<div id="body" class="container-fluid">
<!--Background-->
<!--Text-->
<div class="text">
<p>Random</p>
</div>
</div>
</body>
</html>절대 위치는 흐름에서 벗어나 0x0에 부모에 배치합니다 (절대 위치 또는 상대 위치를 갖는 마지막 블록 요소).
정확히 무엇을 성취하려고하는지 잘 모르겠습니다. li를 a로 설정하는 것이 가장 좋을 수도 있습니다 position:relative. 현재 CSS가 주어지면
http://jsfiddle.net/rtgibbons/ejRTU/ 를 확인하십시오.
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
음의 위쪽, 오른쪽, 아래쪽, 왼쪽 값을 사용하여 위에 나열된 센터링 방법을 어디에서 보았는지 기억이 나지 않습니다. 저에게이 테니 크는 대부분의 상황에서 최고입니다.
위의 조합을 사용하면 이미지가 다음 설정으로 배경 이미지처럼 작동합니다.
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
첫 번째 예제에 대한 자세한 내용은 여기에서 찾을 수 있습니다.
CSS를 사용하여 div의 종횡비 유지
일어나고있는 것처럼 보이는 것은 두 가지 해결책이 있습니다. 여백을 사용하여 중앙에 배치하고 위치를 사용하여 중앙에 배치합니다. 둘 다 잘 작동하지만이 중심 요소를 기준으로 요소의 절대 위치를 지정하려면 절대 위치 방법을 사용해야합니다. 두 번째 요소의 절대 위치는 기본적으로 배치 된 첫 번째 상위 요소이기 때문입니다. 이렇게 :
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
이 게시물을 읽을 때까지 margin : 0 auto 기술을 사용하여 콘텐츠의 왼쪽에 메뉴를 만들기 위해 오른쪽에 동일한 너비의 열을 만들어 균형을 맞춰야했습니다. 예쁘지 않은. 감사!
사용 margin-left: x%;x는 요소의 폭의 절반이다.
html, body, ul, li, img {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#slideshowWrapper {
width: 25rem;
height: auto;
position: relative;
margin-top: 50px;
border: 3px solid black;
}
ul {
list-style: none;
border: 3px solid blue;
}
li {
/* center horizontal */
position: relative;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
/* center horizontal */
border: 3px solid red;
}
img {
border: 1px solid #ccc;
padding: 4px;
//width: 200px;
height: 100px;
}<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
<li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
<li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>
</ul>
</div>
</body>참고 URL : https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element
'Development Tip' 카테고리의 다른 글
| OPTIONS 경로에 CORS 헤더를 추가하면 브라우저가 내 API에 액세스 할 수없는 이유는 무엇입니까? (0) | 2020.10.02 |
|---|---|
| 소수점 이하 두 자리로 반올림하는 방법 (페이지 출력용) (0) | 2020.10.02 |
| GitHub가 Markdown을 사탄 적으로 망친다-666을 DCLXVI로 변경 (0) | 2020.10.02 |
| 커밋되지 않은 로컬 변경 사항을 다른 Git 브랜치에 병합하려면 어떻게해야합니까? (0) | 2020.10.02 |
| 하나의 명령으로 git 루트 디렉토리를 얻는 방법이 있습니까? (0) | 2020.10.02 |