CSS Wrap Text on Images

Question

I am trying to get an image of mine to float in the center of a div. Code currently:

<style type="text/css">
    #navig {
        height: 333px;
    }

    #navig img {
        display: block;
        margin: 0px auto;
    }
</style>
<div id="navig"><img src="images/logo.png" height="333" id="logo" /></div>

The trouble is the image is a diamond and I would like the text to wrap around the diamond with the indents. I believe this is a possibility with <img align='center' /> but this was deprecated in HTML 4.01 and not even supported in HTML 5.

I have tried several possibilities and I still cannot get the text to wrap correctly around the diamond.

You want the text to wrap inside of the diamond, right? Like flushed with the edge of it's parent? — Josh Powell, Dec 13 '13 at 15:57
I want to wrap the text almost flush to the outside of the diamond. Almost like it's a mask that cannot have text inside it. — user2195574, Dec 13 '13 at 16:04
duplicate of [How an I wrap text around a non rectangular image?](http://stackoverflow.com/questions/9129862/how-an-i-wrap-text-around-a-non-rectangular-image) — iambriansreed, Dec 13 '13 at 16:39

score 2 · Answer 1 · edited May 23 '17 at 11:49

Refer to this for some options. I have two options, CSS-Shapes and SVG.

The best option current is to use an SVG image but make sure to use the SVG code and not linking it as an image.

Here is a JSFIDDLE, as you can see the text is able to highlight and can be edited. (More of a pain to edit so do your best with the text in AI before saving but it can still be edited)

This is also very flexible as you can see in this FIDDLE.

This is a very new feature and does not have good browser support yet.

SO CSS-Shapes

Once this,

shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);

is supported you will be able to do this with ease.

I recommend learning the basics so once it is supported by most current browsers you will already know what to do.

@user2195574 Refer to my answer edit, this is the best available option. — Josh Powell, Dec 13 '13 at 16:38

dkellner · Answer 2 · 2019-04-25T13:06:39.813

0

You can't do it with just an image. But you can use shapes, check this page:

https://www.makeuseof.com/tag/csstextwrap/

Using CSSTextWrapper you can easily generate HTML text wraps for any imaginable shape. It can be circles, zig-zags, triangles or whatever you want. Quick and simple-to-use, just load the logo (optional) on the provided dashboard and drag sidelines to define your text wrap.

Quite impressive.

edited Apr 25 '19 at 13:06

answered Dec 13 '13 at 15:59

dkellner

8,726
2
49
47

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Donald Duck Apr 25 '19 at 09:13
@DonaldDuck Excellent point, especially considering that the link is not even working anymore :) I'll look this information up and edit the answer. – dkellner Apr 25 '19 at 13:04

score 0 · Answer 3 · answered Dec 13 '13 at 16:36

I managed to figure out a manual way around this. The image remains in the div and is surrounded by two other closed divs tags.

<div id="navig">
    <div id="nav1"></div>
    <div id="nav2"><img src="images/logo.png" height="333" id="logo" /></div>
    <div id="nav3"></div>
</div>

I then make sure all three of these float left: #navig div {float:left;} and the two empty divs are using text-align. The first one will align right and the last one align left.

The two empty divs are then filled with <ul>s and the menu I wanted around it is filled into the <li> tags. For the examples I'll use some basic menu items.

<div id="navig">
        <div id="nav1">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>
        <div id="nav2">
            <img src="images/logo.png" height="333" />
        </div>
        <div id="nav3">
            <ul>
                <li>Products</li>
                <li>Shipping</li>
                <li>Legal</li>
            </ul>
        </div>
    </div>

I then added #nav1 ul li:nth-child(1) and positioned the first element, which would be "Home" against the diamond. I can change "Home" to whatever I fancy and the position remains as it is forced to text-align: right. Adding these with however many <li> items you are using and editing them to suit your needs. For example:

#nav1 ul li:nth-child(1) {
    position: relative;
    left: 48px;
}

#nav1 ul li:nth-child(2) {
    position: relative;
    left: 24px;
}

#nav1 ul li:nth-child(3) {
    position: relative;
    left: 8px;
}

This pushed my first, second and third items over to the diamond but with a little padding so as to not intrude.

A bit of a lengthy process, but plenty of freedom and has given me the desired effect!

CSS Wrap Text on Images

3 Answers3