将div放在背景图像div中

时间:2017-06-08 17:59:12

标签: html css

我有一个div,其图像将随浏览器一起延伸。我有一个div,当包装div(图像)缩小时,div应该保持居中但是它偏向一侧。我用左:42%;到中心。只要你缩小它就会偏向一边,这很好。

除了左边还有其他选择:42%;?保证金:0自动;没用......



@font-face {
    font-family: myFirstFont;
    src: url(jewler/Allura-Regular.otf);
}
body {
	b111ackground-color: #000000;
}

 h1 {
    color: maroon;
    margin-left: 40px;
}
  h2 {
    color: maroon;
    margin-left: 40px;
}
 h3 {
    color: maroon;
    margin-left: 40px;
}

#wrapper{
	width:80%;
	height:80%;
  margin: 0 auto;
	;
	}
* {
  margin: 0;
  padding: 0;
}

#logo{
	
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
margin-left:10px;
margin-top:10px;
display:table;
width:21%;

max-width:250px;
height:122px;
top:0%;
left:42%;

}


#info{
	margin: 0 auto;
	border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>




</head>

<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>


<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>





<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>





</div>



</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

使用type Test2 private (constructorParam) = let value = constructorParam member this.Value with get() = value static member SomeLogic(a,b) = a+b new(a,b) = Test2(Test.SomeLogic(a,b)) let b = Test2(1,2) left: 50%水平对齐绝对定位的元素。同时删除左边距,使其真正居中。

transform: translateX(-50%)
@font-face {
    font-family: myFirstFont;
    src: url(jewler/Allura-Regular.otf);
}
body {
	b111ackground-color: #000000;
}

 h1 {
    color: maroon;
    margin-left: 40px;
}
  h2 {
    color: maroon;
    margin-left: 40px;
}
 h3 {
    color: maroon;
    margin-left: 40px;
}

#wrapper{
	width:80%;
	height:80%;
  margin: 0 auto;
	;
	}
* {
  margin: 0;
  padding: 0;
}

#logo{
	
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
/* margin-left:10px; */
margin-top:10px;
display:table;
width:21%;

max-width:250px;
height:122px;
top:0%;
left:50%;
transform: translateX(-50%);

}


#info{
	margin: 0 auto;
	border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}