Question

我正在为网站创建横幅广告。我顽固地试图用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;
}

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

AND .......

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

如何在div中居中组元素

1 个答案: