我正在尝试使用我的代码实现以下目标:我想要一个居中的 div 容器 div#title-box。在那个 div 容器内，我想有 3 个其他 div 容器，div#logo、div#title、div#subtitle(查看代码以了解它们的显示方式)
现在真正的问题是:div#logo 有一个给定的宽度，但是其他两个没有，它们是 float 的。 我怎样才能让 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>
最佳答案
尝试一些类似的东西
div#title-box {
width: 500px;
display: inline-block;
height: 600px;
margin: 0 25%;
position: relative;
left:-250px;
}
关于html - 如何使用 CSS 将包含 float div 的 div 容器居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15731791/