我目前正在尝试在容器div中插入带有文本和背景的div。
文本div不会居中也不会垂直居中。
现在我有了这个
<div id="landingimg">
<div>
<h1>Velkommen til hele Danmarks Fristad!</h1>
</div>
</div>
#landingimg {
background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
width: 960px;
max-width:100%;
height: 470px;
}
#landingimg div h1 {
text-align: center;
}
#landingimg div {
background-color: rgba(43, 44, 44, 0.5);
width: 400px;
height: 100px;
margin: 0 auto;
}
答案 0 :(得分:3)
你有不完整的CSS,以及CSS和HTML中的一些错误。我整理了一个JSFiddle供您查看并用作指导,以纠正您的问题并实现您的需求。我的解决方案将处理您的内部div的居中,并使内部div display: table;
和h1 display: table-cell
。
之所以这样,是因为您不仅希望将div文本居中在页面上,还希望将文本在div(h1
)中水平和垂直居中。将文本垂直居中放置在其父容器中的唯一方法是使用display: table-cell;
和vertical-align: middle;
您可以在此处查看JSFiddle:https://jsfiddle.net/Lxpg4bxn/
您的HTML应如下所示:
<div id="landingimg">
<div class="inner">
<h1>
Velkommen til hele Danmarks Fristad!
</h1>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
你应该使用以下CSS:
.clear {
clear: both;
}
#landingimg{
position: relative;
background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
width: 960px;
max-width:100%;
height: 470px;
background-size: cover;
font-family: Arial, Helvetica, Sans-serif;
}
#landingimg div.inner {
position: absolute;
top: 50%;
left: 50%;
background-color: rgba(43, 44, 44, 0.5);
width: 400px;
height: 100px;
margin: -50px 0 0 -200px;
display: table;
}
#landingimg div.inner > h1{
padding: 0;
margin: 0;
text-align: center;
color: #fff;
font-weight: normal;
display: table-cell;
vertical-align: middle;
}
答案 1 :(得分:1)
将此添加到内部div并根据需要更改大小
<div id="landingimg">
<div class="innerDiv">
<h1>
Velkommen til hele Danmarks Fristad!
</h1
</div>
</div>
CSS
.innerDiv{
position: absolute;
top: 50%;
right: 50%;
width: 250px;
height: 143px;
}
答案 2 :(得分:0)
请看一下这篇文章:Centering in CSS
#landingimg{
background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
width: 960px;
max-width:100%;
height: 470px;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#landingimg div h1{
text-align: center;
}
#landingimg div{
background-color: rgba(43, 44, 44, 0.5);
width: 400px;
height: 100px;
margin: 0 auto;
&#13;
<div id="landingimg">
<div class="child">
<h1>
Velkommen til hele Danmarks Fristad!
</h1>
</div>
</div>
&#13;
答案 3 :(得分:0)
使用<img>
代替background-image
,然后在CSS中使用定位。
请看下面的代码段:
#landingimg{
width: 960px;
max-width:100%;
}
#landingimg div h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
text-align: center;
font-size: 24px;
}
#landingimg div{
background-color: rgba(43, 44, 44, 0.5);
margin: 0 auto;
position: relative;
}
img {
max-width: 100%;
}
&#13;
<div id="landingimg">
<div>
<img src="https://www.icr.org/i/wide/cat_walking_wide.jpg" alt="">
<h1>
Velkommen til hele Danmarks Fristad!
</h1>
</div>
</div>
&#13;
希望这有帮助!
答案 4 :(得分:0)
尝试将magin: 0 auto;
添加到#landingimg div
答案 5 :(得分:0)
你能试试这段代码吗?我已将主容器div
添加为 relative ,将内部div
添加为绝对:
#landingimg{
background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
width: 960px;
max-width:100%;
height: 470px;
position:relative;
}
#landingimg div h1{
text-align: center;
}
#landingimg div{
background-color: rgba(43, 44, 44, 0.5);
width: 400px;
height: 100px;
position:absolute;
top:70px;
left:100px;
}
<div id="landingimg">
<div>
<h1>
Velkommen til hele Danmarks Fristad!
</h1>
</div>
</div>
答案 6 :(得分:0)
没有绝对定位的另一种解决方案:
select *
from Table1 A
join Table2 B on A.id in split(B.id,'\\, ')
答案 7 :(得分:0)
这是基于px
<div id="landingimg">
<div class="center">
<h1>
Velkommen til hele Danmarks Fristad!
</h1
</div>
</div>
#landingimg{
background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
width: 960px;
max-width:100%;
height: 470px;
padding-top: 50px;
}
#landingimg div h1{
text-align: center;
}
.center{
background-color: rgba(43, 44, 44, 0.5);
width: 400px;
height: 100px;
margin: auto;
}
无需添加课程。