4

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:

enter image description here

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
Serafino Gubbio
  • 41
  • 1
  • 3

3 Answers3

2

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.

fncombo
  • 1,202
  • 1
  • 12
  • 14
  • is not bad, the text don't go under the image because is out of the

    but is good that stay centered with the float element. it would be some kind of trick that let the float element stay inside the text. Ah and the blue rectangle can be in different size every time, i forgot to specify it in the question.

     – Serafino Gubbio Nov 02 '12 at 01:02
  • Yeah, unfortunately you need to change the `.invisible` div height/width accordingly to the size of the image. I think it would be possible to do it after all with a couple more nested divs, that are floated and centered very carefully; but I'll leave that for you to experiment. – fncombo Nov 02 '12 at 01:07
  • i know, i specified the different size of blue rectangle to avoid some solutions. by the way your answer is useful for me to do some experiment with inline-block, before i tried only table-cell and box. – Serafino Gubbio Nov 02 '12 at 01:14
2

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.

elquimista
  • 2,181
  • 2
  • 23
  • 32
-1

This is impossible with css only. (i would be happy to be proved wrong.)

holycowbatman
  • 49
  • 3