0

I am using css column-count property / multi-column properties in a layout for texts with different amount of words.

.column{
   background:#f8f8f8;
   column-count:2;
   column-gap:40px;
   margin:50px 0;
   padding:20px
}

However, I cannot find any info how it is possible to center an image in the middle of the columns?

If I add an object using column-span, eg

    .img-centered {
    shape-outside: border-box;
}

it fills both lines, and shape outside box is not working? like this (done in a word-document ;-(

example of what I want to achieve in css

Thanks for any hints!

Aprilia Parrino
  • 11
  • 2
  • As well as adding code which we can run to see your basic layout and what you have tried already, could you describe more what you want to do with the image 'between the columns'. There isn't much space between your columns, is it an image that is to go behind both columns, centered between them in the gap, or is it a long thin image that is to fit (cover? contain?...) that inter-column gap? – A Haworth Oct 08 '21 at 15:02
  • @AHaworth have just added image of what I want to achieve (I can solve it, using two different columns like .columnA and .columnB, but not not by using the column-count which means for a different text lenght I need to adapt it again and again – Aprilia Parrino Oct 08 '21 at 15:28
  • Does this answer your question? [wrapping two columns of text around an image/shape from both sides html css](https://stackoverflow.com/questions/52867877/wrapping-two-columns-of-text-around-an-image-shape-from-both-sides-html-css) – Leland Oct 12 '21 at 07:03
  • @Leland Thanks for the link - no, this does not solve my problem. because this means that I have to place the text in the

    text

    by hand each time I add a new text based on the template. the beauty of colum-count is that it breaks the content by itself. I hope I could make myself clear?     – Aprilia Parrino Oct 13 '21 at 12:37
  • Think you may be out of luck, alas. I haven’t found any solutions that do not require some mangling of the HTML. – Leland Oct 13 '21 at 13:05
  • @Leland I was afraid that this would be the case... however, thanks for answering and researching! – Aprilia Parrino Oct 14 '21 at 06:20

0 Answers0