How do I center text next to a floating image using css?


Tags: css,html5,image

Problem :

<html>
    <head>
        <style type="text/css">
            img{
                float: left;
                }
        </style>
    </head>
    <body>
        <img id="img" src="imgsource.jpg">
        <h2> Text that should be next to the image. </h2>
        <p> Text that should be below the image and heading. </p>
    </body>
</html>

The problem I'm having is that the text next to the image isn't centered and the next paragraph also goes next to the image when I would like it below the image and heading.



Solution :

http://jsfiddle.net/dxbbog2k/

img {
    vertical-align: middle;
    width: 300px
}

h2{
    display: inline;
}

p{
    clear:both;
    display: block;
}
<img id="img" src="http://dreamatico.com/data_images/kitten/kitten-3.jpg">
<h2> Text that should be next to the image. </h2>

<p>Text that should be below the image and heading.</p>


    CSS Howto..

    how to apply css on only one class?

    Since KB2898785 IE6 doesn't load locally-sourced CSS for a page delivered remotely--how to correct?

    How to replicate this table layout in HTML4/CSS2 (incl. vert-centered rows)

    How to fluid images when resize window?

    How to Toggle Switch - Prices and Config? [closed]

    How to create a sliding animation on menu hover with jQuery?

    How to align a button inside a DIV

    how to make a child div visible when clicking its parent div in pure css

    How can I create a good-looking responsive image gallery WITHOUT perfectly sized images?

    How can I create a line after my text to the width of the container?

    How to centralise a button div

    How to make a photo collage using html and css? [closed]

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to get dropdown menus to align with the correct menu tab

    How to add links to tabbing order when they're made visible with CSS?

    How to properly center steps in bootstrap?

    How to know if an element is rendered?

    How do you centre two icons (images) side by side in footer?

    How to zoom into a specific location of an image using CSS

    How do I stretch a div to be the height of the document body, not the viewport? (included code)

    How to change elements display order in CSS?

    CSS / bxSlider: How to avoid that Images are overlapping parent div

    How can I align my adsense graphics?

    How to get a reference to id=“xxx.yyy” in CSS?

    How to make a descriptions list inline?

    CSS How to align checkbox image

    how can i center a nested div

    How to set a max-width only to text nodes not in a tag?

    How to create border between two divs with dynamically changing heights?

    How to get an App made using JavaScript to autoresize for other Apple Devices?