垂直对齐图像(Vertical-align image)

2019-07-20 23:00发布

我有一个包含一个图像和AP标签(如下所示),一个div。 我要对齐的图像在垂直方向的div中间取决于段落多少行是。 垂直对齐不起作用。 我使用JavaScript现在找出多少添加到边距,但宁愿使用CSS。 有任何想法吗?

<div>
    <img>
    <p>Multi-line</p>
</div>

Answer 1:

尝试设定line-height的的属性p元件到图像,例如高度:

div p {
  line-height: 18px;
}

编辑:刚刚意识到我误解了问题,错过了事实p会是多行。 一个选项来尝试在除去img共元件并将其设置为所述background-image的的p代替,具有background-positionleft, center 。 就像是:

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


Answer 2:

这是纯CSS,垂直对准图像,并且还调整图像大小下来,如果它比容纳箱高(或宽)。 因此,这个盒和图像都可以是不破坏垂直取向的任何尺寸。 此外,您可能希望将左边距添加到<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> 



Answer 3:

给所述图像显示:块,浮动:左,垂直对齐:中间。 或者,给它一个线高度等于包含元素的。



Answer 4:

CSS的垂直对齐属性只在工作表单元格和内联元素。 由于段落标记在默认情况下指定一个块级元素,它什么都不做。 为了让你的文字,你描述要对齐,你要么有你的div分成两个容器或使用一个表。 这里有一个很好的页面,以帮助您了解更好一点: 了解垂直对齐



Answer 5:

它是一种两列的工作? (图片左侧,文本右侧)

如果是这样,你可以肯定只是坚持每个元素在它自己的DIV ...

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

认为会对你以后在做什么



Answer 6:

也许在解决方案的Jak PSAT网络将帮助。



Answer 7:

div img {
    float: left;
}


文章来源: Vertical-align image