我一直在拉我的头发,试图让垂直div中心本身。动态高度div内的垂直中心内嵌块div
该div本身包含一个svg图像,图像下面的一些文本,并右移并显示为行内块。在图像的左侧,也是在容器div中,是一些显示标题的文本。如果标题的文本在大于1行的情况下呈现,则图像必须在中间浮动。
这意味着高度是动态的,我不会提前知道。
我试过这个问题的表解决方案,但无法让它工作,因为我想垂直居中的中心已经显示:内联块,并不能找出如何使其工作显示:表。
.like-container {
}
.like-div {
\t display: inline-block;
\t float: right;
\t font-size: 10px;
\t margin-right: 100px;
}
.title {
\t font-size: 40px;
\t width: calc(100% - 100px);
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
<span>Like</span>
</div>
<div class="title">
This is the Title!
</div>
</div>
我创建了一个plnkr帮助您展示它的外观:http://plnkr.co/edit/qzqTjQ8W7jl72nRKd6Sj
亲爱的耶稣救我!
时的尺寸是不固定的,即当你想使用inline-block的上浆因为这个问题确实是行不通的。 – Nit