대형 디브 내부의 이미지 센터(수직 및 수평)를 만드는 방법
디브 200x200px를 가지고 있습니다.50 x 50 px 이미지를 디브의 바로 가운데에 배치하고 싶습니다.
어떻게 할 수 있습니까?
는 를를 수 .text-align: center디바를 위해서.하지만 수직 정렬이 문제입니다.
이전 브라우저에서 작업(IE >= 8)
절대 위치는 자동 여백 허용과 결합하여 요소를 수평 및 수직으로 중심을 맞춥니다.요소 위치는 상대 위치 지정을 사용하여 부모 요소 위치를 기반으로 할 수 있습니다.결과 보기
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
개인적으로, 나는 그것을 디브 안에 배경 이미지로 배치하고 싶습니다, 그것을 위해 CSS:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
Div를 가정합니다(Div Div 를합니다).id="demo"height그리고.width가 추가하기background문제가 되지 않아야 함)
브라우저에 부담을 주도록 합니다.
은 를입니다 을 것입니다.table와 함께valign이야.이것은 디브의 키를 알던 모르던 상관없이 효과가 있을 것입니다.
<div>
<table width="100%" height="100%" align="center" valign="center">
<tr><td>
<img src="foo.jpg" alt="foo" />
</td></tr>
</table>
</div>
하지만 당신은 항상 단지 그 일에 충실해야 합니다.css될 수 있으면 언제든지
당신의 더 큰 디바를 당신과 함께 설정하겠습니다.position:relative;이미지를 위해 다음 작업을 수행합니다.
img.classname{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
이것은 이미지와 포함된 디바의 치수를 모두 알고 있기 때문에 가능합니다.이를 통해 디바를 포함하는 다른 아이템도 얻을 수 있습니다.선 높이를 사용하는 것과 같은 솔루션은 그렇지 않습니다.
편집: 참고...당신의 여백은 이미지 크기의 마이너스 반입니다.
올바르게 작동합니다.
display: block;
margin-left: auto;
margin-right: auto
그렇지 않으면 위에서 수평 센터링만 제공하는 경우 이를 시도합니다.
.outerContainer {
position: relative;
}
.innerContainer {
width: 50px; //your image/element width here
height: 50px; //your image/element height here
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Flexbox 사용:
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center; /* Centering y-axis */
align-items :center; /* Centering x-axis */
}
여기에 모든 것의 중심을 잡을 수 있는 또 다른 방법이 있습니다.
HTML: (단순)
<div class="Container">
<div class="Content"> /*this can be an img, span, or everything else*/
I'm the Content
</div>
</div>
CSS:
.Container
{
text-align: center;
}
.Container:before
{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}
혜택들
컨테이너 및 내용 높이를 알 수 없습니다.
구체적인 음의 여백 없이, 선 높이를 설정하지 않고(따라서 여러 줄의 텍스트에서 잘 작동), 스크립트 없이도 CSS 전환에서도 잘 작동합니다.
이것은 좀 늦어지고 있지만, 여기 제가 부모 디브 내에서 요소를 수직 정렬하는 데 사용하는 솔루션이 있습니다.
이것은 컨테이너 div의 크기를 알고 있지만 포함된 이미지의 크기를 알고 있는 경우에는 유용합니다.(라이트 박스나 이미지 회전목마로 작업할 때는 종종 이런 경우가 있습니다.
시도해봐야 할 스타일링은 다음과 같습니다.
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
위의 Valamas와 Lepu의 답변들은 크기를 알 수 없는 이미지, 또는 크기를 알 수 있는 이미지들을 다루는 가장 간단한 답변들이라는 것을 알게 되었습니다.몇 가지 작은 수정 사항이 있습니다. 관련 없는 스타일을 제거하고 질문에 맞게 200px로 크기를 조정한 다음 max-height/max-width를 추가하여 너무 클 수 있는 이미지를 처리하는 것입니다.
div.image-thumbnail
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
디브에서
style="text-align:center; line-height:200px"
우리는 이를 쉽게 달성할 수 있습니다.flex. 필요없는background-image.
<!DOCTYPE html>
<html>
<head>
<style>
#image-wrapper{
width:500px;
height:500px;
border:1px solid #333;
display:flex;
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>
</body>
</html>수직 정렬은 가장 잘못 사용되는 CSS 스타일 중 하나입니다.td나 CSS "디스플레이: 테이블 셀"이 아닌 요소에 대한 기대는 작동하지 않습니다.
이것은 그 문제에 대한 아주 좋은 글입니다.http://phrogz.net/CSS/vertical-align/index.html
원하는 것을 얻을 수 있는 가장 일반적인 방법은 다음과 같습니다.
- 패딩 상하의
- 포지션 절대
- 선높이의
CSS에서는 다음과 같이 수행합니다.
img
{
display:table-cell;
vertical-align:middle;
margin:auto;
}
@sleepy 다음 특성을 사용하여 쉽게 수행할 수 있습니다.
#content {
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
#myImage {
display: block;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid yellow;
}<div id="content">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>참고문헌: W3
이미지 갤러리가 있는데 이미지의 정확한 높이나 폭을 미리 알 수는 없지만 포함될 디브보다 작다는 것만 알고 있습니다.
컨테이너에 line-height 설정을 조합하고 이미지 요소에 vertical-align:middle을 사용함으로써 최종적으로 다음 HTML 마크업과 다음 CSS를 사용하여 FF 3.5, 사파리 4.0, IE 7.0에서 동작할 수 있게 되었습니다.
HTML 마크업
<div id="gallery">
<div class="painting">
<a href="Painting/Details/2">
<img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
</a>
</div>
<div class="painting">
...
</div>
...
</div>
CSS
div.painting
{
float:left;
height:138px; /* fixed dimensions */
width: 138px;
border: solid 1px white;
background-color:#F5F5F5;
line-height:138px;
text-align:center;
}
div.painting a img
{
border:none;
vertical-align:middle;
}
일반적으로 제가.line-height200 px이 될 것입니다.보통은 효과가 있습니다.
이것은 저에게 효과가 있습니다.
<body>
<table id="table-foo">
<tr><td>
<img src="foo.png" />
</td></tr>
</table>
</body>
<style type="text/css">
html, body {
height: 100%;
}
#table-foo {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
#table-foo img {
display: block;
margin: 0 auto;
}
</style>
Flexbox를 사용하는 또 다른 방법(여기서는 아직 언급하지 않음)도 있습니다.
컨테이너에 다음 규칙만 설정하면 됩니다.div:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
div {
width: 200px;
height: 200px;
border: 1px solid green;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}<div>
<img src="http://lorempixel.com/50/50/food" alt="" />
</div>Flexbox의 일부 기능을 확인하고 최대 브라우저 지원을 위한 구문을 파악하기 위해 Flexbox부터 시작하는 것이 좋습니다.
또한 요즘 브라우저 지원은 꽤 좋습니다: 사용할 수 있습니까?
다음에 대한 교차 브라우저 호환성을(를)display: flex그리고.align-items할 수
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
이것은 오래된 해결책이지만 브라우저 시장 점유율은 충분히 발전하여 IE7의 저하가 염려되지 않는다면 IE 해킹 부분 없이도 해결할 수 있을 것입니다.외부 용기의 치수는 알고 있지만 내부 이미지의 치수는 알 수 없거나 알 수 없는 경우에 사용할 수 있습니다.
.parent {
display: table;
height: 200px; /* can be percentages, too, like 100% */
width: 200px; /* can be percentages, too, like 100% */
}
.child {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
}
<div class="parent">
<div class="child">
<img src="foo.png" alt="bar" />
</div>
</div>
만만하다
img {
transform: translate(50%,50%);
}
이미지의 위치를 중심 수평으로 설정할 수 있습니다.
#imageId {
display: block;
margin-left: auto;
margin-right:auto;
}
저는 hmtl과 css를 사용하여 원 모양 안에서 수직과 수평으로 중심을 잡을 수 있도록 이미지를 구하려고 노력해왔습니다.
이 스레드에서 몇 가지 점을 조합한 후, 다음과 같이 생각해냈습니다: jsFiddle
jsFiddle이라는 세 개의 열 레이아웃 안에 있는 다른 예가 있습니다.
CSS:
#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}
.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML:
<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
아래 코드를 사용하여 영상의 중심을 수평과 수직으로 맞출 수 있습니다(IE/FF에서 작동).이미지의 상단 가장자리를 브라우저 높이의 정확히 50%로 배치하고, 여백 상단(이미지 높이의 절반을 위로 당기는 것)이 완벽하게 가운데를 향하게 합니다.
<style type="text/css">
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* for explorer only */
</style>
<body style="background-color:#eeeeee">
<div id="middle">
<div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
<img src="..." height="..." width="..." />
</div>
</div>
</body>
나는 오래된 밴드웨건 위에 점프하는 것을 좋아합니다!
다음은 이 답변에 대한 2015년 업데이트입니다.CSS3를 사용하기 시작했습니다.transform자리 매김을 위해 내 더러운 일을 하는 것.이것은 추가적인 HTML을 만들 필요가 없고, 수학을 할 필요가 없으며(반폭의 사물을 찾을 필요가 없습니다), 어떤 요소에서도 그것을 사용할 수 있습니다!
예를 들어보자 (마지막에 바이올린으로).HTML:
<div class="bigDiv">
<div class="smallDiv">
</div>
</div>
함께 제공되는 CSS:
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
요즘 제가 많이 하는 일은 제가 원하는 것을 중심으로 수업을 하고 그 수업을 매번 다시 이용하는 것입니다.예를 들어,
<div class="bigDiv">
<div class="smallDiv centerThis">
</div>
</div>
CSS
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
}
.centerThis {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
이렇게 하면 항상 용기에 중심을 잡을 수 있습니다.다가 싶은 .position
BTW: 이것은 더 작은 디브 내부에 더 큰 디브를 센터링하는 데에도 효과가 있습니다.
div {
position: absolute;
border: 3px solid green;
width: 200px;
height: 200px;
}
img {
position: relative;
border: 3px solid red;
width: 50px;
height: 50px;
}
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}<div class="center">
<img class="center" src="http://placeholders.org/250/000/fff" />
</div>관련:이미지 중앙에 배치
단서를 주신 모든 분들께 감사드립니다.
저는 이 방법을 사용했습니다.
div.image-thumbnail
{
width: 85px;
height: 85px;
line-height: 85px;
display: inline-block;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
}
포지셔닝을 사용합니다.다음이 제게 도움이 되었습니다.
div{
display:block;
overflow:hidden;
width: 200px;
height: 200px;
position: relative;
}
div img{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
부모 디브와 이미지의 크기를 알고 있다면 절대 위치 지정을 사용하면 됩니다.
저는 이게 통했어요.이미지 CSS에 추가:
img
{
display: block;
margin: auto;
}
언급URL : https://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div
'programing' 카테고리의 다른 글
| ng-bind-html 스트립 요소 특성 (0) | 2023.10.01 |
|---|---|
| 싱글톤과 원형 콩의 차이점은 무엇입니까? (0) | 2023.10.01 |
| MySQL에서 쿼리할 때 테이블 연결 (0) | 2023.10.01 |
| 워드프레스에서 API로 새로운 사용자를 생성할 때 이메일 비밀번호를 보내는 방법은? (0) | 2023.10.01 |
| ASP의 루트 디렉터리를 가져오려면 어떻게 해야 합니까?NET 서버 애플리케이션? (0) | 2023.10.01 |