垂直对齐浮动div附近的文本
[英]vertical align text near a floating div
问题描述
就像在标题中我不能将一些文本垂直居中放在靠近div的div上，我在google和stackoverflow上搜索，所以我决定在这里提出一个问题。
这是我需要使用Paint做的一个例子：
我试过显示表格单元格和盒子解决方案，但它只能在左上角没有浮动div的情况下工作。
当文本比蓝色div长时，它应该在div下面，就像带有浮动div的普通文本一样。
我正在寻找一个唯一的CSS解决方案，它可以做到或不做？
3 个解决方案
解决方案1
2 2012-11-01 23:16:27
我不完全确定这是否可能，但这是我最好的尝试，至少适用于前两个例子。
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim. Proin venenatis arcu id enim rutrum eget condimentum urna venenatis. Suspendisse at tortor nisi, in tempus ligula. Maecenas nisl felis, bibendum ut luctus nec, bibendum sit amet erat.</p>
</div>
CSS：
.wrap {
width:500px;
border:1px solid red;
margin:10px;
}
.wrap:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
margin-left:-0.25em; /* adjusts spacing */
}
p {
display:inline-block;
vertical-align:middle;
width:350px;
}
img {
float:left;
}
.invisible {
height:100px;
display:inline-block;
vertical-align:middle;
}
小提琴 。
解决方案2
2 2017-02-20 11:55:58
纯CSS可以实现这一点。
body { background: url("http://img08.deviantart.net/b5aa/i/2015/140/7/c/chalkboard_by_lorelinde-d8u2phm.jpg") no-repeat; } .container { color: rgba(255, 255, 255, .9); font-family: "Chalkduster", "Baskerville"; font-size: 18px; padding: 0 10px; width: 550px; } #user_portrait { border-radius: 13px; border: 3px solid rgba(255, 255, 255, .9); float: left; margin: 0 20px 0 0; max-height: 300px; max-width: 300px; filter: sepia(50%); } #overview_text { letter-spacing: 1px; line-height: 1.3rem; padding: 0 0 0 10px; white-space: pre-line; }
<body> <p class="container"> <img id="user_portrait" src="https://pbs.twimg.com/profile_images/704337993293815810/PmkKs6yw.jpg"> <span id="overview_text">“Never hate your enemies. It affects your judgment.” “My father held a gun to his head, and my father assured the bandleader that either his signature or his brains would be on the contract.” “There are many things my father taught me here in this room. He taught me: keep your friends close, but your enemies closer.” </span> </p> </body>
关键是将图像和文本都放入非内联父标记并使它们浮动。
解决方案3
-1 2012-11-01 22:46:42
仅使用css是不可能的。 （我很乐意被证明是错的。）
垂直对齐文本并在包含Div的内部浮动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.