반응형
div 요소 내에서 이미지를 수평으로 중앙에 배치하는 방법은 무엇입니까?
컨테이너 div 내부에서 이미지를 중앙(수평) 정렬하려면 어떻게 해야 합니까?
여기 HTML과 CSS가 있습니다.저는 썸네일의 다른 요소들을 위한 CSS도 포함시켰습니다.그것은 내림차순으로 실행되기 때문에 가장 높은 요소는 모든 것의 용기이고 가장 낮은 요소는 모든 것의 내부에 있습니다.
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>알겠습니다, PHP가 없는 마크업을 추가했으니 보기 쉬울 것 같습니다.두 가지 해결책 모두 실제로는 효과가 없는 것 같습니다.맨 위와 맨 아래의 텍스트는 중심을 맞출 수 없으며 이미지는 컨테이너 div 내에서 중심을 잡아야 합니다.컨테이너가 오버플로를 숨겨놨기 때문에 보통 초점이 있는 이미지의 중심을 보고 싶습니다.
#artiststhumbnail a img {
display:block;
margin:auto;
}
다음은 제 솔루션입니다. http://jsfiddle.net/marvo/3k3CC/2/
CSS 플렉스박스는 이미지 부모 요소에서 이를 수행할 수 있습니다.이미지의 가로 세로 비율을 유지하려면 다음을 추가합니다.align-self: flex-start;하게.
HTML
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
CSS
.image-container {
display: flex;
justify-content: center;
}
출력:
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
align-self: flex-start; /* to preserve image aspect ratio */
}
.image-3 {
width: 300px;
align-self: flex-start; /* to preserve image aspect ratio */
}<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>나는 방금 W3 CSS 페이지에서 이 해결책을 찾았고 그것은 나의 문제에 답했습니다.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
출처: http://www.w3.org/Style/Examples/007/center.en.html
이것 또한 그것을 할 것입니다.
#imagewrapper {
text-align:center;
}
#imagewrapper img {
display:inline-block;
margin:0 5px;
}
이미지 또는 모든 요소를 수평으로 중앙에 배치하기 위한 가장 좋은 방법은 CSS 클래스를 만들고 다음 매개 변수를 포함하는 것입니다.
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
그런 다음 다음 다음과 같이 만든 CSS 클래스를 태그에 적용할 수 있습니다.
HTML
<img class="center" src="image.jpg" />
다음을 수행하여 요소의 CSS를 인라인으로 연결할 수도 있습니다.
<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />
...하지만 스타일을 변경하려면 센터링 CSS 코드를 사용하여 모든 태그를 여러 번 변경해야 하기 때문에 CSS를 인라인으로 작성하는 것은 권장하지 않습니다.
이게 제가 하게 된 일입니다.
<div style="height: 600px">
<img src="assets/zzzzz.png" alt="Error" style="max-width: 100%;
max-height: 100%; display:block; margin:auto;" />
</div>
그러면 이미지 높이가 600px로 제한되고 부모 너비가 더 작을 경우 수평으로 중앙에 위치하게 됩니다(또는 부모 너비가 더 작을 경우 크기가 아래로 조정됨). 비율이 유지됩니다.
저는 위험을 무릅쓰고 당신이 추구하는 것은 다음과 같습니다.
참고, 질문에 실수로 다음 사항이 누락된 것 같습니다(댓글 참조).
<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...
필요한 것은 다음과 같습니다.
#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}
http://jsfiddle.net/userdude/XStjX/3/
CSS에 추가:
#artiststhumbnail a img {
display: block;
margin-left: auto;
margin-right: auto;
}
이 경우 이미지인 하위 요소를 참조하는 것입니다.
네, 이와 같은 코드는 잘 작동합니다.
<div>
<img/>
</div>
하지만 상기시켜 드리자면, 이미지 스타일은
object-fit : *depend on u*
그래서 최종 코드는 예시와 같습니다.
div {
display: flex;
justify-content: center;
align-items: center;
}
div img {
object-fit: contain;
}<div style="border: 1px solid red;">
<img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
border-radius: 50%;
height: 7.5rem;
width: 7.5rem;
object-fit: contain;" />
</div>
왼쪽과 오른쪽에 동일한 픽셀 패딩을 배치합니다.
<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
이미지를 수평으로 중앙에 배치하려면 다음 작업을 수행합니다.
<p style="text-align:center"><img src=""></p>
을 진을안에넣다습 .newDiv하는 을포너의 폭을 .div이미지와 동일합니다.적용합니다.margin: 0 auto;에▁newDiv이 그이중이될다것니입것의 이 될 것입니다.div에서.
포지셔닝을 사용합니다.다음은 저에게 효과가 있었습니다.(수평 및 수직 중심)
영상의 중앙으로 줌하여(영상이 div를 채웁니다):
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
영상의 중심을 확대/축소하지 않고(영상이 div를 채우지 않음)
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
영상을 div의 중심에 맞춥니다.
/* standar */
div, .flexbox-div {
position: relative;
width: 100%;
height: 100px;
margin: 10px;
background-color: grey;
}
img {
border: 3px solid red;
width: 75px;
height: 75px;
}
/* || standar */
/* transform */
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
/* || transform */
/* flexbox margin */
.flexbox-div {
display: -webkit-flex;
display: flex;
background-color: lightgrey;
}
.margin-img {
margin: auto;
}
/* || flexbox margin */
/* flexbox justify align */
.flexbox-justify {
justify-content: center;
}
.align-item {
align-self: center;
}
/* || flexbox justify align */<h4>Using transform </h4>
<div>
<img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox margin</h4>
<div class="flexbox-div">
<img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox justify align</h4>
<div class="flexbox-div flexbox-justify">
<img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>저는 몇 가지 방법을 시도했습니다.하지만 이 방법은 나에게 완벽하게 효과가 있습니다.
<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
이미지를 중앙에 배치하는 대응적인 방법은 다음과 같습니다.
.center {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
플렉스 박스를 사용하여 최소 코드로 컨텐츠를 정렬할 수 있습니다.
HTML
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
CSS
.image-container{
width:100%;
background:green;
display:flex;
.image-container{
width:100%;
background:green;
display:flex;
justify-content: center;
align-items:center;
}<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>js fiddle 링크 https://jsfiddle.net/7un6ku2m/
입력 상자를 사용할 때와 같이 인라인으로 이 작업을 수행해야 하는 경우
여기 저에게 효과가 있었던 빠른 해킹이 있습니다: 당신의 주변 (이 경우에는 이미지 링크)
순식간에div와 함께style="text-align:center"
<div style="text-align:center">
<a title="Example Image: Google Logo" href="https://www.google.com/"
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>
<h6><strong>This text will also be centered </strong></h6>
</div> /* ends centering style */
.document {
align-items: center;
background-color: hsl(229, 57%, 11%);
border-radius: 5px;
display: flex;
height: 40px;
width: 40px;
}
.document img {
display: block;
margin: auto;
}<div class="document">
<img src="./images/icon-document.svg" alt="icon-document" />
</div>곤경에 처한
left:0;
right:0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
/*-------------------important for fluid images---\/--*/
overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
overflow-y: scroll;
margin-left:0px;
margin-top:0px;
/*-------------------important for fluid images---/\--*/
}
.thirddiv{
float:left;
width:100vw;
height:100vh;
margin:0px;
background:olive;
}
.thirdclassclassone{
float:left; /*important*/
background:grey;
width:80vw;
height:80vh; /*match with img height bellow*/
margin-left:10vw; /* 100vw minus "width"/2 */
margin-right:10vw; /* 100vw minus "width"/2 */
margin-top:10vh;
}
.thirdclassclassone img{
position:relative; /*important*/
display: block; /*important*/
margin-left: auto; /*very important*/
margin-right: auto; /*very important*/
height:80vh; /*match with parent div above*/
/*--------------------------------
margin-top:5vh;
margin-bottom:5vh;
---------------------------------*/
/*---------------------set margins to match total height of parent di----------------------------------------*/
}
</style>
</head>
<body>
<div class="thirddiv">
<div class="thirdclassclassone">
<img src="ireland.png">
</div>
</body>
</html>
##Both Vertically and Horizontally center of the Page
.box{
width: 300px;
height: 300px;
background-color: #232532;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
스타일.css
img#center-img{
display: block;
margin: auto;
}
HTML
<html>
<body>
<div>
<img src='pic.png' id='center-img'>
</div>
</body>
</html>
이미지를 중앙에 배치하려면 이 CSS를 사용합니다.이미지의 첫 번째에 너비를 지정해야 합니다.
img{
width: 300px;
position: fixed;
left0;
right:0;
}
언급URL : https://stackoverflow.com/questions/10989238/how-to-center-image-horizontally-within-a-div-element
반응형
'programing' 카테고리의 다른 글
| 창 기능을 사용하여 표의 열을 업데이트하는 방법 (0) | 2023.08.18 |
|---|---|
| C#에서 문자열 인코딩 결정 (0) | 2023.08.18 |
| docker_compose.yml의 링크와 dependent_on 간의 차이 (0) | 2023.08.13 |
| 마우스를 한 번 클릭하여 모든 DIV 텍스트 선택 (0) | 2023.08.13 |
| 서로 다른 두 Get-ChildItem 호출의 결과를 단일 변수로 결합하여 동일한 처리를 수행합니다. (0) | 2023.08.13 |