HTML / CSS文本不对齐

Question

我正在建立一个网站，但我的文字无法与索引介绍h1的中心对齐！

 .index-intro { width:100%; background-color: #00C8FF; height: 20px; float:center; } .index-intro h1 { font-family: tpeb; font-size: 15px; text-transform: uppercase; text-align:center; display:inline-block; } 

 <section> <div class="index-intro"> <div class="wrapper"> <h1>Welcome to Anime!</h1> </div> </div> </section> 

谢谢:)

Answer 1

这是一组精简的HTML和CSS：

 .index-intro { background-color: #00C8FF; text-align:center; } .index-intro h1 { font-size: 15px; text-transform: uppercase; } 

 <div class="index-intro"> <div class="wrapper"> <h1>Welcome to Anime!</h1> </div> </div> 

这也有助于垂直对齐问题，因为您已经固定了包含的<div>的高度。 虽然我想你可能想要那个？

这是带有一些填充的： https : //jsfiddle.net/9a3b4f7g/1/

Answer 2

请尝试以下代码段

 .index-intro { width:100%; background-color: #00C8FF; height: 20px; text-align:center } .index-intro h1 { font-family: tpeb; font-size: 15px; text-transform: uppercase; } 

 <section> <div class="index-intro"> <div class="wrapper"> <h1>Welcome to Anime!</h1> </div> </div> </section> 

Answer 3

您的CSS没问题。

只需在样式标签中添加此类

<style type="text/css">
  .wrapper
  {
  text-align: center;
  }
</style>

Answer 4

信不信由你，你可以做你想要的只是

.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
text-align:center; /*this makes the text go in the middle*/
display:inline-block;
width:100%;
background-color: #00C8FF; /*your bar color*/
padding-top:20px;  /* this "fattens" the blue bar topside */
padding-bottom:20px; /* this "fattens" the blue bar bottomside */
}

这基本上是做的是，“制作一个适合窗口宽度100％的蓝色条，中间带有文本，在顶部和底部加粗”。 如果可以的话，最好像这样保持CSS简单。 从长远来看，可以避免您感到困惑。