•  19-09-2019
  •  | 
  •  

문제

이미지와 AP 태그가 포함 된 DIV가 있습니다 (아래 참조). 단락의 몇 줄에 따라 DIV 중간의 이미지를 수직으로 정렬하고 싶습니다. 수직 정류가 작동하지 않습니다. 나는 지금 JavaScript를 사용하여 Margin-Top에 얼마나 추가 해야하는지 알아 내지 만 CSS를 사용합니다. 어떤 아이디어?

<div>
    <img>
    <p>Multi-line</p>
</div>
도움이 되었습니까?

해결책

설정해보십시오 line-height 의 속성 p 이미지의 높이에 요소, 예를 들어 :

div p {
  line-height: 18px;
}

편집하다: 그 질문을 잘못 읽었고 사실을 놓쳤다는 것을 깨달았습니다. p 멀티 라인이 될 것입니다. 시도 할 옵션 중 하나는 제거하는 것입니다 img 요소를 완전히 설정하고 그것을 설정합니다 background-image 의 p 대신, a background-position 의 left, center. 같은 것 :

div p {
  background: transparent url(path/to/img) no-repeat left center;
  padding-left:30px; /* Set based on width of image */
}

다른 팁

이것은 순수한 CSS이며, 이미지를 수직으로 정렬하며, 포함 된 상자보다 더 크거나 더 넓은 경우 이미지를 크기를 조정합니다. Ergo, 상자와 이미지는 수직 정렬을 깨지 않고 모든 크기 일 수 있습니다. 또한 왼쪽 여백을 <p> 이미지에 숨겨져있는 태그.

CSS

/* Positioning */
.absoluteCenterWrapper {
    position: relative; /* Contains the image in the div */
}
.absoluteCenter { /* Aligns image vertically */
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}
.absoluteCenterWrapper p { /* Pushes <p> to edge of image */
    margin-left: 101px; /* Width of image */
}
.absoluteCenter { /* Specifies width of image to avoid overlap if image changes */
    width: 101px; /* Width of image */
}

/* Sizing - resizes down to avoid cutting off */
.absoluteCenter {
    max-height: 100%;
    max-width: 100%;
}

/* Making it "pretty" */
.absoluteCenterWrapper { margin: 1em; padding: 0.001em; /* <- Hack to contain margins */ outline: 1px solid red; }
.absoluteCenterWrapper p { margin-top: 1em; margin-bottom: 1em; padding-left: 1em;}
<div class="absoluteCenterWrapper">
 <img class="absoluteCenter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAXCAMAAAAlSHE3AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA2/AAANvwELq/fgAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAjFQTFRF/38A/4AB/4AC/4ED/4EE/4IF/4IG/4MH/4MI/4QJ/4QK/4UL/4UM/4YN/4YO/4cP/4cQ/4gR/4gS/4kT/4kU/4oV/4oW/4sX/4sY/4wZ/4wa/40b/40c/44d/44e/48g/5Ai/5Ej/5Ek/5Im/5Mo/5Qp/5Qq/5Ur/5Us/5Yt/5Yu/5cv/5cw/5gy/5kz/5o1/5o2/5s3/5s4/5w6/508/54+/58//59A/6BB/6FD/6FE/6JF/6JG/6NH/6NI/6RJ/6RK/6VL/6VM/6ZN/6ZO/6dP/6dQ/6hR/6lT/6pV/6pW/6xZ/61c/65d/65e/69g/7Bi/7Fj/7Jl/7Jm/7Nn/7No/7Rp/7Rq/7Vr/7Zt/7Zu/7dw/7hy/7p2/7t3/7t4/7x5/717/718/759/75+/79//7+A/8GD/8GE/8KF/8KG/8OH/8OI/8WL/8WM/8aO/8eQ/8iR/8iS/8mT/8mU/8qV/8uX/8uY/8yZ/8ya/82b/82c/86e/9Ch/9Ci/9Gj/9Km/9Oo/9Sp/9Sq/9Ws/9at/9ew/9ix/9mz/9m0/9q1/9u4/9y6/969/96+/9+//9/A/+DB/+LG/+TK/+XM/+bN/+bO/+fP/+jR/+nT/+nU/+rV/+vX/+vY/+za/+3b/+7e/+/f//Dh//Di//Hk//Po//Tp//Tq//Xr//Xs//bu//fv//jx//jy//nz//n0//r1//r2//v3//v4//z5//z6//37//38//79//7+////1DEj+QAAAndJREFUSInt1NlfTHEYx/HPNKYaSkVZRkyqGUq2CUOyDDUqe4U4kX3fyb5FliJOirIMQkWSmpnM9Px1buZMZ/Kai2644Ln6vZ7f9znvi+ecA//rHy+jOw+AdPdkfXuKpwQ2e8aN9nGZnhXasdyTEG4nyDUANohLn54uW6BaEker2KVUO9ZI0t9VJq2tWmqKVGIclSWWcH5hOjDLYYRERzIwo6xivgEwO1LjF+9MCykLty01R1cqfsg3eZmhVyzN0unz7tDyb+6B4avkQ7lkwN6fA93SOBFsssfj719gl1KIvS1fetpPRSgNTqfT6TwmLiiUG/aYlR2qXnnY6yTutiwK5c9/MTBXug9AXQeslotjWOO9BTbxbTUa4+xSCopsx3AgEKFo5YIXPWOBfTJ7WMmSw0BCT0MoXyx57H5fq2Loug7PPpmAC0PTscnd8F4+NgG0Ryh1VqvValXERYy/RVEU5Yy4hxW3LAFo7AjlkwPVPLmyzm/OkfXQdQegSAqxiaIp4+QQwNkoe0mVD6qqqqq6aliplFyAmwPaQEtj3EBZSnC5IpOJCdYC5MtGbLJJU6yyC+BQtO33XdbaYWWVLAdoeqvdnOgrHEqj5eSj18CneoAyWaxXYoPHAC5FUx53poxUpg5eBSz+m9pAgajtcLzt+zmgvjcZuN8/Qa/Q9gowfY6mZHlbCyxZxQ/ide/YhWCN1dHqn6kNmH1yBpaJFAFzgs3zMo7KESKUErmemV3fE/V7yXkuIr4Gk06JPT0o8s4RHuCpuCDeG0gCWPZRxHfQGKlQ5ZPArf06ZWSNn59tHtGKnTMtahxm5Jp+b8bljfrf9L/+bP0CQB36KehprcoAAAAASUVORK5CYII=">
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
</div>
<div class="absoluteCenterWrapper">
 <img class="absoluteCenter" src="data:image/png;base64,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">
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
</div>

이미지 표시 : 블록, 플로트 : 왼쪽 및 세로 정렬 : 중간. 또는 포함 요소의 선 높이와 동일한 선 높이를 제공하십시오.

CSS 수직-정상 속성은 표 셀과 인라인 요소에서만 작동합니다. 단락 태그는 기본적으로 블록 요소를 지정하므로 아무것도하지 않습니다. 설명대로 텍스트를 정렬하려면 DIV를 두 컨테이너로 분리하거나 테이블을 사용해야합니다. 다음은 조금 더 잘 이해하는 데 도움이되는 좋은 페이지입니다. 수직 정체 이해

두 열 작업입니까? (왼쪽 이미지, 오른쪽으로 텍스트)

그렇다면, 당신은 반드시 각 요소를 자체 div로 붙일 수 있습니다 ...

<div>
    <div style="width:100; float:left"><img /></div>
    <div style="width:100; float:left"><p>multiline</p></div>
</div>

그것이 당신이 따라갈 일을 할 것이라고 생각하십시오

어쩌면 솔루션 일 수도 있습니다 Jak Psát 웹 도움이 될 것입니다.

추가하다 

div img {
    float: left;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top