在文本内划分div

时间:2016-12-13 13:33:25

标签: html css

我目前正在尝试在容器div中插入带有文本和背景的div。

文本div不会居中也不会垂直居中。

最终结果应该是这样的 Yes. A cat I know..

JSFiddle

现在我有了这个

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

8 个答案:

答案 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

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

答案 3 :(得分:0)

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

请看下面的代码段:

&#13;
&#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;
&#13;
&#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,'\\, ')

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

答案 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;
}

无需添加课程。