垂直對齊浮動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.