# Center an image and wrap text around
**URL:** https://forum.code.org/t/center-an-image-and-wrap-text-around/35642
**Category:** Coding and Debugging Help
**Tags:** csd-unit-2
**Created:** [December 30, 2021, 2:39pm UTC](https://forum.code.org/t/center-an-image-and-wrap-text-around/35642 "2021-12-30T14:39:55Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@kbardelli](https://forum.code.org/u/kbardelli)
#### Post date: [December 30, 2021, 2:39pm UTC](https://forum.code.org/t/center-an-image-and-wrap-text-around/35642/1 "2021-12-30T14:39:55Z")
I have a student that wants to center an image on his html page and have the text wrap around it. Not sure how to do this.
We know how to float left and right, but he wants the image in the center and the words on both sides.
[https://codeprojects.org/\_dXDJZA4YiXTexfkatpmkWFOFVZhTWAdvTLOi1LcMNk](https://codeprojects.org/_dXDJZA4YiXTexfkatpmkWFOFVZhTWAdvTLOi1LcMNk)
**Link to the project or level:** [replace with link to the curriculum or get the “Share” link to a project]
**What I expect to happen:** [replace with a detailed description of the behavior you’re trying to create]
**What actually happens:** [replace with a detailed description of what actually happens when the code runs including any errors or unexpected behavior]
**What I’ve tried:** [replace with a detailed description of what you’ve already tried to do to solve the problem]
---
### Author:  [@melynn](https://forum.code.org/u/melynn)
#### Post date: [December 30, 2021, 5:43pm UTC](https://forum.code.org/t/center-an-image-and-wrap-text-around/35642/2 "2021-12-30T17:43:28Z")
Hi @kbardelli,
What you are describing, if I understand correctly, is really a 3 column layout. These layouts are beyond the CSD scope but not too difficult to implement.
This tutorial is a [simple 3 column layout](https://www.w3schools.com/howto/howto_css_three_columns.asp) and when you add it to your student’s page it looks [like this](https://codeprojects.org/W6Y40ewCsjc4z1Cz4-bo2w9_WKTQXrvFkRfq4v3J1aY). I did remove the extra paragraph tags since the purpose of a layout is that the text wraps within its container or column.
There are other layouts in the tutorial section on [this page of W3Schools](https://www.w3schools.com/howto/default.asp). You do have to scroll way down on the left hand navigation column to the “GRID” section.
Hope that helps! Happy New Year!
~Michelle
---
### Author:  [@kbardelli](https://forum.code.org/u/kbardelli)
#### Post date: [January 1, 2022, 6:05pm UTC](https://forum.code.org/t/center-an-image-and-wrap-text-around/35642/3 "2022-01-01T18:05:57Z")
Thanks! I like this idea, but not sure that’s what he wants to do. He wants the copy to be split on the left and right of the picture, similar to the attached JPEG.
---
### Author:  [@mwood](https://forum.code.org/u/mwood)
#### Post date: [January 1, 2022, 9:11pm UTC](https://forum.code.org/t/center-an-image-and-wrap-text-around/35642/4 "2022-01-01T21:11:31Z")
@kbardelli,
This isn’t particularly an easy thing to do, but it is possible. I did find an article on how it could be achieved and it is similar to what @melynn suggested using columns, along with a little css magic. It may not be easy for a beginning student to accomplish, but if your student is motivated enough, they may be able to get theirs to work by following the instructions at this site:
> **[Faking 'float: center' with Pseudo Elements | CSS-Tricks](https://css-tricks.com/float-center/)**
>
> Using a couple of floated pseudo elements on the elements containing columns of text, we can knock out a part in the middle making it look like text is wrapping around an image both directions.
Good luck!
Mike
---
### Author:  [@melynn](https://forum.code.org/u/melynn)
#### Post date: [January 1, 2022, 9:13pm UTC](https://forum.code.org/t/center-an-image-and-wrap-text-around/35642/5 "2022-01-01T21:13:30Z")
So he would like a single block of text to wrap all the way around the image including the bottom. That isn’t possible with “float”. Float is what allows text to wrap around an image and there is no **float: center**.
Workarounds would mean breaking up the text but an HTML Table might give him the look he wants and would be fairly easy to implement. I quickly mocked up his page in a table [here](https://codeprojects.org/hFPFuWPOMhDekzetK8OggC6zsbH9Mjg6vBItfEzRatw). You could play around with the padding attributes to remove some of the space between the table cells. Here is an [HTML Table tutorial.](https://www.w3schools.com/html/html_tables.asp)
Other workarounds include using the more responsive tools for page layout. My students have been playing around with [these page layout tools.](https://www.w3schools.com/w3css/w3css_layout.asp) They are a little more responsive for different screen sizes.
Others may have ideas or suggestions as well.
Good luck!
~Michelle