文本居中，但没有响应

Question

在我的自适应网站中，与页面相比，Headr文本没有响应。如下面的截图：

以下是我使用的相关代码：

＆＃13;

＆＃13;

html, body {
  margin: 0 auto;
  padding: 0; 
}
.container {
  max-width: auto;
  margin: 0 auto;
width:100%;
} 
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
width: 380px;
padding: 10px;
left: 0;
right: 0;
margin-right:auto;
margin-left:auto;
position:absolute;
display:table-cell;
vertical-align:middle;
}
.nav-pills li a {
  color: black;
  border-radius: 10px;
  margin: 3px;
  font-size: 15px;
  font-weight: 589px;
  border-radius:0px;
  background-color: white;
  margin-top:260px;
}
.nav-pills li a:hover {
color: white;
background-color: transparent;
display:inline-block;
border: 1px white solid;
font-weight: 300;
}
.box h2 {
font:  70px/1.2 'Pacifico', Helvetica, sans-serif;
color: white;
text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2);
padding-right: 5px;
padding-left: 5px;
margin-left: 15px;
}
 .box span {
  margin-left: 70px;
 }
 .nav-pills {
display:table;
margin:0 auto;
position:relative;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}

＆＃13;

<div class="header" id="header">
<div class="container">
	<div class="row row-centered">
		<div class="col-md-6 col-centered">
	<div class="box">	
	<h2>Lewis <br><span>Designs</span></h2>
	</div>
	</div>
	</div>
	<div class="menu">
	<div class="row row-centered">
		<div class="col-md-6 col-centered">

	<ul class="nav nav-pills"> 
	<li><a href="./about.html">About</a></li> 
	<li><a href="./consultation.html">Consultations</a></li> 
	<li><a href="./gallery.html">Gallery</a></li> 
	<li><a href="./contact.html">Contact</a></li> 
	</ul>
</div>	
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是的新手，在以前的问题中找到了帮助。 我现在唯一的问题是，当我收缩屏幕时，我的标题框不再响应。我想知道我做错了什么。

Answer 1

看起来您需要做的就是在.col-centered类上定义宽度，因为您使用.box定义了嵌套的postion:absolute类，这将设置引用的位置父元素。由于父元素没有宽度并且在其自己的父元素中居中，因此标题框的位置使用该元素作为左参考点并从那里扩展380px。您可以阅读有关CSS框模型及其工作原理的更多信息here。

.col-centered {
display:inline-block;
float:none;
width:100%;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}

See fiddle