html - 简单的 block 定位

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 */
}

是这样的想法吗？

示例 fiddle :HERE

如果以上是所需的外观，可以通过删除 div(无需 IE hack)以仅使用图像元素本身来大大简化

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