我正在尝试将div
置于图像中心。我不确定这里有什么问题。我目前也对定位和对齐感到困惑,我可能也需要对它进行处理。感谢您提前输入的内容。
.template-banner{
width: 100%;
height: auto;
margin: 0;
}
.template-banner-wrpr{
width: 100%;
height: 500px;
}
.template-banner-img {
content: url("../img/template-banner.jpg");
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr1{
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr{
width: 100%;
position: absolute;
top: 50%;
right: -50%;
margin: 0 auto;
height: 500px;
}
.tbanner-reg-desc-wrpr{
width: 680px;
float: left;
height: 285px;
}
.tbanner-reg-input{
width: 270px;
float: left;
background-color: rgb(247,247,247);
border-radius: 5px;
padding: 10px 25px 25px 25px;
height: 250px;
}
.tbanner-reg-input p{
font-size: 20px;
font-weight: bold;
}
.tbanner-loginb{
background-color: #ff3b30;
border: solid #ff3b30 1px ;
border-color: #ff3b30;
color: white;
font-weight: bold;
}
.tbanner-regemail, .tbanner-regpsw, .tbanner-regpnumber, .tbanner-loginb {
width: 100%;
padding: 10px;
margin: 5px 0px 10px 0px;
border-radius: 5px;
border-width: 1px;
border-style: line;
border-color: rgb(249,249,249);
}
.template-features {
width: 100%;
height: auto;
text-align: center;
background-color: rgb(246,244,245);
}
<div class="template-banner">
<div class="template-banner-wrpr1"><img class="template-banner-img"></div>
<div class="tbanner-reg-wrpr">
<div class="tbanner-reg-desc-wrpr">
<h3 p id="tbanner-reg-desc-title">Heading Division 1</h3>
<p id="tbanner-reg-desc-info">Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p>
</div>
<div class="tbanner-reg-input"><p>Registration/Image</p>
<input type="text" placeholder="Your work email" name="wemail" class="tbanner-regemail">
<input type="password" placeholder="Your Password" name="psw" class="tbanner-regpsw">
<input type="text" placeholder="090-1234-5678" name="pnumber" class="tbanner-regpnumber">
<input type="submit" name="gstarted" value="Signup" class="tbanner-loginb">
</div>
</div>
</div>
答案 0 :(得分:3)
从顶部和左侧50%处的绝对定位使用50%的容器来定位孩子。从顶部和左侧翻译元素-50%的变换将使用50%的元素自身维度,并获得居中元素。
使用内联块,网格,弹性框或需要最少css的简单浮动,可以轻松实现两列布局。
.container {
background-image: url(http://farm5.staticflickr.com/4615/24977545657_f984bbaec2_b.jpg);
height: 400px;
border: 5px solid black;
position: relative;
}
.content-wrapper {
min-height: 100px;
height: 100px;
max-width: 80%;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border: 5px solid red;
}
.content-wrapper div {
width: 50%;
height: 100%;
box-sizing: border-box;
float: left;
background: #fff;
}
.left-column {
border: 5px solid orange;
}
.right-column {
border: 5px solid cyan;
}
<div class="container">
<div class="content-wrapper">
<div class="left-column"></div>
<div class="right-column"></div>
</div>
</div>
答案 1 :(得分:0)
这是解决问题的代码
我更改了top
left
和tbanner-reg-wrpr
transform: translate(-50%, -50%);
并添加.template-banner
并且position
需要将relative
更改为.template-banner{
width: 100%;
height: auto;
margin: 0;
position: relative;
}
.template-banner-wrpr{
width: 100%;
height: 500px;
}
.template-banner-img {
content: url("http://lorempixel.com/g/400/200/");
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr1{
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr{
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
transform: translate(-50%, -50%);
background: #0000006b;
}
.tbanner-reg-desc-wrpr{
width: 200px;
float: left;
height: 285px;
}
.tbanner-reg-input{
width: 270px;
float: left;
background-color: rgb(247,247,247);
border-radius: 5px;
padding: 10px 25px 25px 25px;
height: 250px;
}
.tbanner-reg-input p{
font-size: 20px;
font-weight: bold;
}
.tbanner-loginb{
background-color: #ff3b30;
border: solid #ff3b30 1px ;
border-color: #ff3b30;
color: white;
font-weight: bold;
}
.tbanner-regemail, .tbanner-regpsw, .tbanner-regpnumber, .tbanner-loginb {
width: 100%;
padding: 10px;
margin: 5px 0px 10px 0px;
border-radius: 5px;
border-width: 1px;
border-style: line;
border-color: rgb(249,249,249);
}
.template-features {
width: 100%;
height: auto;
text-align: center;
background-color: rgb(246,244,245);
}
<div class="template-banner">
<div class="template-banner-wrpr1"><img class="template-banner-img"></div>
<div class="tbanner-reg-wrpr">
<div class="tbanner-reg-desc-wrpr">
<h3 p id="tbanner-reg-desc-title">Heading Division 1</h3>
<p id="tbanner-reg-desc-info">Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p>
</div>
<div class="tbanner-reg-input"><p>Registration/Image</p>
<input type="text" placeholder="Your work email" name="wemail" class="tbanner-regemail">
<input type="password" placeholder="Your Password" name="psw" class="tbanner-regpsw">
<input type="text" placeholder="090-1234-5678" name="pnumber" class="tbanner-regpnumber">
<input type="submit" name="gstarted" value="Signup" class="tbanner-loginb">
</div>
</div>
</div>
df %>%
group_by(ID) %>%
mutate(numdays = as.numeric(max(Date) - min(Date)) + 1,
pctmissing = (numdays - n()) / numdays)
答案 2 :(得分:0)
这是我的FIDDLE
.wrapper{border:1px solid red;width:100%;height:200px;display:flex;justify-content:center}
.content{width:200px;border:1px solid red;margin:20px;display:block;display:flex;justify-content:center}
.left{border:1px solid green;width:40%;display:inline-block}
.right{border:1px solid yellow;width:40%;display:inline-block}
和css
{{1}}
我使用弹性盒,