使内容适合 div 和中心，另一个居中的 div 与其重叠......但不向下推内容答案

【问题标题】：Fit content to div & center, with another centered div overlapping it... but not pushing content down使内容适合 div 和中心，另一个居中的 div 与其重叠......但不向下推内容
【发布时间】：2015-10-15 20:41:53
【问题描述】：

基本上我想要这样的东西：http://i.stack.imgur.com/GwtOm.png

我希望包含标题的 div 适合标题的大小。我知道这可以通过 display:inline-block; 来实现。或显示：表格单元格；但是当我添加另一个我想与线重叠的 div 时，它会将所有内容都向下推。

不确定是否有办法避免这种情况，或者是否有更好的方法来获得我想要的效果。任何建议都非常感谢！

两个代码示例：

body,html {margin:0;border:0;padding:0; vertical-align: baseline; line-height: 1;
}

.banner {
  width:600px;
  height: 400px;
  background-color:grey;
  
}

.outer {
  display:table;
  margin:0 auto;
  background-color:pink;
  position:relative;
}

.inner {
  display:table-cell;
  
}

.top{
  border-bottom: 2px black solid;  
}

.top, .bottom{
  padding:20px;
  text-align:justify;  
}

.overlap{
  position:relative;
  background-color:pink;
  text-align:center;
  top:65px;  
  z-index: 100;
  line-height:1;
  padding:0 10px;
}

.txty{
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size:16px;
  
}

<div class="banner">
  
  <div class="outer"> 
  <div class="inner">
    <div class="overlap"><span class="txty">AND</span></div> 
 </div> 
  </div>
  
<div class="outer">   
<div class="inner">
  <div class="top">
    <span class="txty">
Hi, this div fits to the content and it is horizontally centered, too. 
    </span>
  </div>   
  
  <div class="bottom">
    <span class="txty">
      hey cool</span>
  </div>
  
</div>
  
</div>
</div>

或者我尝试过的另一种方法是：

body {
  background-color:grey;
  margin:0;
  
  
}

.overr {
  position:relative;
  background-color:green;
  display:inline-block;
  text-align:center;
  top:43px;  
  z-index: 100;
  line-height:1;
  padding:0 10px;
  
}


.outer {
  text-align:center;
  background-color:pink;
  position:relative;
  top:20px;
}

.inner1 {
    display:inline-block;
    background-color:green;
    line-height:0;    
}

.a{
  
  border-bottom:4px solid black;
}


.b {
    display:inline-block;
    line-height:0;    
}

  

<div class="outer">
<div class="overr">AND</div>
</div>  
  
<div class="outer">
  
<div class="inner1">
  

  
  <div class="a">
  <p>hi, this div fits to the content and it is centered, too. Cool!</p>
  </div>
  
  <div class="b">
 
  <p> test</p>
  </div> 
  
</div>
</div>

【问题讨论】：

标签： html position center overlapping typography

【解决方案1】：

尝试position:absolute 并调整top 和left

.overlap{
 position:absolute;
 background-color:pink;
 text-align:center;
 top:65px;  
 z-index: 100;
 line-height:1;
 padding:0 10px;
}

否则将浮动应用到 div 并应用适当的边距

【讨论】：