Question

所以，这就是我所拥有的：

<div class="header">
  <div id="logo">
    <img src="logo.jpg">
  </div>
  <div id="title">
    <img src="title.png">    
  </div>
</div>

我需要将title.png对齐到中心，logo.jpg留给他，带有一些填充。使用CSS的最佳方法是什么？

Answer 1

.header {
  position: relative; /* so logo can be positioned inside this */
  text-align: center; /* to center the inline-block (title) */
  background: #eee;
  border: 1px solid #000;
  padding: 5px; /* as required */
}

#title {display: inline-block;}
#title {display: inline !ie7;} /* IE6/7 hack to make inline-block work */

#logo {
  position: absolute; 
  left: 5px; /* match the padding value */
  top: 5px; /* match the padding value */
}

是这样的想法吗？

示例小提琴：HERE

如果以上是必需的外观，可以通过删除div（不需要IE hacks）来大大简化，只使用图像元素本身

<div class="header">
  <img src="http://dummyimage.com/150x50/000/fff&text=LOGO" id="logo">
  <img src="http://dummyimage.com/350x50/DAD/fff&text=Title" id="title">
</div>

.header {
  position: relative; /* so logo can be positioned */
  text-align: center; /* naturally centre the title image */
  background: #eee;
  border: 1px solid #000;
  padding: 5px;
}

#logo {position: absolute; left: 5px; top: 5px;}

简单的块定位

1 个答案:

示例小提琴：HERE