Question

我一直试图将我的文字放在宽度和高度百分比的div上。我尝试使用flexbox，但这对我来说没有用，所以我使用本教程作为参考：http://jsfiddle.net/4be9cp23/。这是本教程中的代码：

HTML

<div id="header">
        <h1>Home</h1>
</div>

CSS

#header {
        background-color: red;  
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%; 
        height: 15%;
    }
#header h1{ display:inline-block; }

这是我正在http://codepen.io/maureenv/pen/dMEPap?editors=1100工作的演示的链接。我希望白色文本在龙的图像上居中（没有下面的表单容器类中的文本移动）：

我按照上面的教程尝试： HTML

 <div class="masthead-container">
      <img src="http://maureenvogel.com/images/charizard.jpg" class="masthead-img">

      <div class="quote-container">
        <div class="quote"> "This is my quote that won't center no matter what I do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " </div>
        <div class="quote-author"> -quote by me</div>
      </div>
    </div> <!-- close masthead container div -->

CSS

.masthead-container .masthead-img{
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  position: relative;
}

.masthead-container {
  text-align: center;
  vertical-align: middle;
}

.masthead-container .quote-container{
  display: inline-block;
}

.quote-container{
  top: 0;
  left: 0;
  color: white;
  position: absolute;
  text-align: center;
  width: 100%;
}

然而，文本拒绝居中，并且显示内联块对我来说不起作用。请帮忙。谢谢！

Answer 1

尝试这样的事情：

.quote-container{
  top: 50%;
  left:  50%;
  color: white;
  position: absolute;
  text-align: center;
  display:inline-block;
  transform:translateX(-50%) translateY(-50%);
}

Answer 2

也许你可以尝试将你的img放在div的背景上，然后制作：

＆＃13;

.masthead-container{
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
   background: url:(...);
}

.text-to-center{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  
}

＆＃13;

<div class="masthead-container">
  <div class="text-to-center"><p>hello-world</p></div>
</div>

＆＃13;

如何使用百分比宽度和高度在文本上垂直和水平居中显示文本？

2 个答案: