Question

我目前正在尝试在容器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;
}

Answer 1

你有不完整的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;
}

Answer 2

将此添加到内部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;

    }

Answer 3

请看一下这篇文章：Centering in CSS

＆＃13;

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

Answer 4

使用<img>代替background-image，然后在CSS中使用定位。

请看下面的代码段：

＆＃13;

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

希望这有帮助！

Answer 5

尝试将magin: 0 auto;添加到#landingimg div

Answer 6

你能试试这段代码吗？我已将主容器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>

Answer 7

没有绝对定位的另一种解决方案：

select *
from Table1 A
join Table2 B on A.id in split(B.id,'\\, ')

小提琴：https://jsfiddle.net/Lpcy6kew/8

Answer 8

这是基于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;
}

无需添加课程。

在文本内划分div

8 个答案: