vertical align text near a floating div
Question
like in the title i can't put some text centered vertically near a div with CSS, i searched on google and on stackoverflow so i decided to make a question here.
This is an example of what i need done with Paint:
I tried display table cell and box solutions but it works only without the floating div on top left.
When the text is longer than the blue div it should go under the div just like a normal text with a floating div.
I'm searching an only CSS solution, it can be done or not?
3 answers
solution1
2 2012-11-01 23:16:27
I am not completely sure if that is possible, but here is my best attempt at it, at least works for the first 2 examples.
<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;
}
A fiddle .
solution2
2 2017-02-20 11:55:58
This is possible with pure 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>
The key point is to put both image and text into non-inline parent tag and make them float.
solution3
-1 2012-11-01 22:46:42
This is impossible with css only. (i would be happy to be proved wrong.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.