在CSS中移动标题

我试图学习HTML和CSS，但遇到了一个小绊脚石。在CSS中移动标题

我有以下代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testing My HTML and CSS</title> 
    <style> 

     * { 
      padding: 0; 
      margin: 0; 
     } 

     .header { 
      background-color: black; 
      height: 100px; 
      width: 100%; 
     } 

     .header h1 { 
      margin-top: 0; 
      text-align: center; 
      color: white; 
      height: 100px; 
      width: 100%; 
     } 

     .sidebar { 
      background-color: #ebebeb; 
      position: absolute; 
      width: 200px; 
      height: 100%; 
     } 

    </style> 
</head> 
<body> 
    <div class="header"> 
     <h1>Hello, World!</h1> 
    <div class="sidebar"> 
    </div> 
    <div class="content"> 
    </div> 
    <div class="footer"> 
    </div> 
</body> 
</html>

可以跑here。

我想在.header的中心有<h1>Hello, World!</h1>。我试过.header h1中的margin-top，但它移动了整个.header。

对不起，这样一个简单的问题 - 我是一个完整的新手。

来源

2015-03-02 erip

使用的line-height试试这个：100px的上.header H1的作品.. – Logz 2015-03-02 05:34:01

使用line-height属性为100px指文本将在一行中间垂直居中。 – Logz 2015-03-02 05:41:00

你也可以使用header作为'display：table;'和'.header h1'作为'display：table-cell' – ketan 2015-03-02 05:41:08

如果your're不打算更多的元素添加到邮件头，你可以添加的line-height：100px的;至。标题h1规则集。这就是它...

垂直对齐可能会很棘手，如果你不想乱用很多代码，这是实现它的最短途径。作为一般规则，要将文本垂直居中放置到元素中，只需使其行高等于元素的高度（除非您有一些填充或边距改变的东西）。

来源

2015-03-02 05:35:56

使用的line-height改为如下：

.header { 
      background-color: black; 
      height: 100px; 
      width: 100%; 
      line-height:2; 
     }

来源

2015-03-02 05:35:53

请试试这个demo

，或者您可以使用

.header{ 
line-height:3; 
    }

来源

2015-03-02 05:42:40 priya786

在CSS中移动标题

回答

相关问题