如何在div中居中一组元素答案

【问题标题】：How to center group of elements within div如何在div中居中一组元素
【发布时间】：2013-09-10 10:13:13
【问题描述】：

我正在为网站创建横幅。我固执地尝试用 HTML5/CSS3 来做，而不是制作图像。横幅有一个不透明的背景图像，它跨越了页面包装的整个宽度（设置为 80% 的屏幕宽度）。除此之外，我有三个元素：一个徽标和两行文本。我已将三个元素放在我希望它们绝对化的位置，并使用顶部、左侧等。我还将这三个元素放在它们自己的 div 中。我想将它们放在背景图像的中心。我试过在两边设置自动边距（css3中的首选方式，但它不起作用。

实际上，不仅能够将三个组（徽标，第 1 行，第 2 行）居中，而且能够将它们作为绝对元素一起移动，这也很棒。这可能吗？

http://jsfiddle.net/abalter/965Mj/1/

* HTML *

<div id="wrapper">
    <header>
        <div id="background-image"></div>
        <div id="header-group">
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
             <h1 id="line1">check it out!</h1>

             <h1 id="line2">Home Inspection</h1>

        </div>
    </header>
</div>

* CSS *

#wrapper {
    background-color: Wheat;
    width: 1280px;
    /* doing that because jsfiddle viewport is not the entire page width.*/
    /* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {
    position: relative;
    width: 100%;
    height: 180px;
    background-color: White;
}
header #background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
}
#header-group {
    margin: 0 auto 0 auto;
}
#house-logo {
    position: absolute;
    float: left;
    height: 160px;
    top:10px;
    left: 10px;
}
#line1 {
    display: block;
    position: absolute;
    left: 220px;
    top: -15px;
    padding: 0;
    margin: 0;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-size: 7em;
    color: FireBrick;
}
#line2 {
    display: block;
    position: absolute;
    left: 185px;
    bottom: 1px;
    margin: 0;
    padding: 0;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

【问题讨论】：

标签： html css centering absolute

【解决方案1】：

#wrapper {
background-color: Wheat;
width: 1280px;
/* doing that because jsfiddle viewport is not the entire page width.*/
/* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {

width: 100%;
height: 180px;
background-color: White;
margin:0 auto;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
text-align: center;
 display: table;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}

#house-logo {
 display: table;
float: left;
height: 160px;
padding-left: 10em;


}
#line1 {
display: table;

text-align: center;
padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
 #line2 {



    margin: 0;
    padding-right: 6em;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

与

<div id="wrapper">
<header>
    <div id="background-image">

 <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
         <h1 id="line1">check it out!</h1>

         <h1 id="line2">Home Inspection</h1>

    </div>
</header>
</div>

///////////////////////////////////////////////////////////////////////////////////////

 <!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>

<body>
 <div id="wrapper">
    <header>
        <div id="background-image"></div>
        <div id="header-group" >
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
             <h1 id="line1">check it out!</h1>

             <h1 id="line2">Home Inspection</h1>

        </div>
    </header>
  </div>

</body>
</html>

和.......

#wrapper {
background-color: Wheat;
width: 1280px;
}   
header {

width: 100%;
height: 215px;
background-color: White;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
height: 215px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
position: absolute;

}
#header-group {
margin: 0 auto;


}
#house-logo {

float: left;
height: 160px;
padding-left: 30%;    
}
#line1 {

padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
#line2 {


display:inline;
font-family:"Trebuchet", sans-serif;
font-size: 3.7em;
}

注意：它并不完全适合您提供的代码。我不得不将标题的高度扩展到 215px 以适应“line2”，如果您需要更小的高度尺寸，您可以尝试使用第 2 行 css。

【讨论】：

我把你不需要的所有职位都拿出来了。我使用填充修复它并显示表格我看不到你的代码的其余部分所以我不知道它是否适合。
它确实有效，但不是我想要的。我真的很想把这个组作为一个单元保持在一起，并将标题组居中。看来应该可以了。
我做了另一种方式，也许这对你会更好。请注意，我必须扩展标题和背景图像的高度以适合 line2 在背景中，因为 line2 不会向上移动。所以这让你弄清楚你是否不喜欢这个
为什么要否决答案而不提供其他解决方案？