相对于HTML-CSS中图像的居中标题

Question

I have floated an image left using:

img {
    float:left;
}

and have also centred a heading using:

<h1 align="center">Text</h1>

The heading moves position as the image is inserted so its no longer centred, its pushed to the right. How can I centre the heading again? I have tried a lot of different CSS properties for the heading but cant seem to get it working. Thanks.

Answer 1

try fiddle

http://jsfiddle.net/aqofdz8u/

<div>
    <img src="http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images.jpg" width="220" height="220" alt="A photo of me.">
    <h1>Text</h1>
</div>

CSS

img {
    float:left;
}

h1 { text-align: center; }

Answer 2

HTML

<div>
    <img src="http://www.nnsheriff.org/img/placeholder/blogpost-placeholder-100x100.png" alt="">
     <h1>Text</h1>
</div>

CSS

img {
    float:left;
}
h1 {
    text-align: center;
    margin-left:10px;
    vertical-align:top;
    margin:0;
    padding:0;
}

Fiddle Sample

Answer 3

To make h1 be centered regading the whole page you need to add position: absolute to the img and add img and h1 inside a div with position relative.

 .wrap { position: relative; } img { position: absolute; top: 0px; left: 0px; } h1 { color: red; font-family: Trebuchet MS; font-size: 250%; text-align: center; } 

 <div class="wrap"> <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" alt="Highdown logo" /> <h1>Sports day</h1> </div> 

Answer 4

 .wrap { position: relative; } img { position: absolute; top: 0px; left: 0px; } h1 { color: red; font-family: Trebuchet MS; font-size: 250%; text-align: center; } 

 <div class="wrap"> <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" alt="Highdown logo" /> <h1>Sports day</h1> </div>