文章/答案/技术大牛

发布

社区首页 >问答首页 >使标题相对于HTML-CSS中的图像居中

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

Stack Overflow用户

提问于 2014-10-16 17:10:50

回答 4查看 62关注 0票数 0

我使用以下命令浮动了一张左边的图像：

img {
    float:left;
}

并使用以下命令将标题居中：

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

当插入图像时，标题会移动位置，使其不再居中，并向右推。我怎样才能使标题重新居中呢？我已经尝试了很多不同的CSS属性的标题，但似乎不能让它工作。谢谢。

css

html

回答 4

Stack Overflow用户

发布于 2014-10-16 17:22:24

试试小提琴

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; }

票数 0

Stack Overflow用户

发布于 2014-10-16 17:52:43

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

票数 0

Stack Overflow用户

发布于 2014-10-16 18:01:42

要使h1居中重新呈现整个页面，您需要将position: absolute添加到img中，并将img和h1添加到具有相对位置的div中。

.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26400483

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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