Question

我使用以下内容浮动了一张图片：

img {
    float:left;
}

并使用以下方式集中了标题：

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

标题在插入图像时移动位置，使其不再居中，向右推动。如何再次将标题居中？我已经为标题尝试了很多不同的CSS属性，但似乎无法使其正常工作。感谢。

Answer 1

尝试小提琴

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

要使h1居中注册整个页面，您需要添加位置：绝对到img并在具有位置相对的div中添加img和h1。

.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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: