Question

我正在尝试使用我的代码实现以下内容：我希望有一个div容器，div＃title-box，它是居中的。在div容器里面我想要另外3个div容器，div＃logo，div＃title，div＃subtitle（查看代码以了解它们的确切显示方式）

现在实际问题：div＃logo有一个给定的宽度，但另外两个没有，它们是浮动的。我怎么能让div＃title-box环绕其他三个div，但同时保持居中。我看到的另一个问题是div＃title-box不能有固定的宽度。

任何想法。谢谢！

编辑：必须修改下面的代码，以便div＃title-box包围其他div并保持居中。

如果有人需要使用代码，这里有一个完整的例子：

<!DOCTYPE html>
<html>
<head>
<style>
   div#title-box {
   max-width: 500px; 
   display: block;
   height: 600px;
   margin: 0 auto;
   position: relative;
   }

   div#logo {
   padding: 0;
   margin: 0;
   position: absolute;
   top: 100px;
   left: 5px;
   width: 100px;
   height: 100px;
   overflow: auto;
   background: #ff0000 no-repeat;
   background-size: 100% 100%;
   border-radius: 15px;
   float: left;
   }

   div#title {
   padding: 0;
   margin: 0;
   position: absolute; 
   left: 110px;   
   top: 100px;
   bottom: 20px;
   right: 10px;
   overflow: auto;
   float: left;
   }

   div#subtitle { 
   padding: 0;
   margin: 0;
   position: absolute;    
   top: 140px;
   bottom: 20px;
   right: 10px;
   left: 110px;
   overflow: auto;
   float: left;
   }


</style>
</head>
<body>
<div id="title-box">
  <div id="logo">
  </div>  
  <div id="title">
    <h1>Hello</h1>
  </div>  
  <div id="subtitle">
    <h3>A A A A A A A A A A A A A A A!</h3>
  </div> 
</div>

Answer 1

按照

的方式尝试

   div#title-box {
       width: 500px; 
       display: inline-block;
       height: 600px;
       margin: 0 25%;
       position: relative;
       left:-250px;

   }

Answer 2

申请时

position: absolute

到你的代码中，它将被放在DOM上下文的其余部分。

我已经修改了你的CSS：http://jsfiddle.net/asBmS/。你的包装div现在应该总是包含子div。这是你想要的吗？

Answer 3

我能想到的最好的建议是更多的“黑客”，如果你改变内容的宽度需要调整。看看这个链接并看到偏移边距 - 左边，它将所有内容放在中心位置。您可能需要进一步调整以满足您的需求。

http://jsfiddle.net/asBmS/15/

#logo,#title,#subtitle{
    /*offset hack*/
    margin-left: 10% !important;
}

如何将包含浮动div的div容器与CSS居中？

3 个答案: