Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering an image in a paragraph

Tags:

css

css-float

I am looking for a purely CSS way to center an image within a paragraph of text so the text wraps on both sides of the image.

Ideely the image  |-----| would be placed
before or after   |-img-| the text within
the code structure|-----| and the text 
would wrap around the image.
like image 586
Matthew Sprankle Avatar asked Aug 10 '11 20:08

Matthew Sprankle


People also ask

How do I center an image in a paragraph in HTML?

Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.

How do you centralize an image?

To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center. P.S.: place-items with a value of center centers anything horizontally and vertically.

How do you center an image in CSS?

To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property. If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.

Can you center an image in HTML?

Using the <center> tagYou can center a picture by enclosing the <img> tag in the <center></center> tags. This action centers that, and only that, picture on the web page. It should be noted that this method is deprecated in HTML5 and will not always work in all browsers going forward.


3 Answers

Found an answer that works quite well available at: http://www.alistapart.com/articles/crosscolumn/

like image 179
Matthew Sprankle Avatar answered Oct 21 '22 13:10

Matthew Sprankle


IE10 Platform Preview supposedly (according to this article) has a new feature called positioned floats that seem to accomplish what you're looking for.

For now, though, I think you're screwed :/

like image 40
Lobstrosity Avatar answered Oct 21 '22 15:10

Lobstrosity


I don't think it's possible:

<p> Text that goes here and image <img src="img.jpg"/> continues text</p>

As far as I know browsers treat <p>content as belonging to a line, thus when the browser parses your p-tag which contains the image it will automatically make that line as high as the image.

Maybe it's possible with css3 though...

like image 23
Daniel Figueroa Avatar answered Oct 21 '22 13:10

Daniel Figueroa