如何在div中集中元素组

我正在为网站创建横幅。我固执地试图用HTML5/CSS3来做，而不是制作图像。该横幅有一个不透明的背景图像，跨越页面包装的整个宽度（设置为80％的屏幕宽度）。除此之外，我有三个元素：一个徽标和两行文字。我已经把三个我想要的东西放在我想要的地方，让它们成为绝对的，并且使用顶部，左边等等。我还将这三个元素放在他们自己的div中。我想将它们置于背景图片上。我试着在两边设置自动边距（css3中的首选方式，但它不起作用）如何在div中集中元素组

实际上，如果能够不仅能将三个中心组（标识，第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; 
}

来源

2013-08-30 abalter

#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>

///////////////////编辑GEARED TOWARDS COMMENT /// ///////////////

<!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。

来源

2013-08-30 23:15:39

我拿出了你不需要的所有职位。我用填充修复它和显示表我看不到你的代码的其余部分，所以我不知道这是否适合。 –

它确实有效，但不是我想要的。我真的想把这个团队作为一个单位集中在一起，并将标题组集中在一起。似乎应该是可能的。 – abalter

我让它成为另一种方式，也许这对你会更好。请注意，我不得不延长标题和背景图像的高度以适应背景中的line2，因为line2不会向上移动。这就是你要弄清楚，如果你不喜欢这个 –

如何在div中集中元素组

回答

相关问题