html - 如何使用 css 为 H2 标题标签留下一些顶部空白

Question

在我的边栏中，我有一个红色背景图像作为 H2 标题。

我希望 h2 标题标签垂直和水平居中。

我使用了 text-align: center;。结果是这样的。

它只是水平居中而不是垂直居中。 我加了vertical-align: middle;，但是没有效果，我还试了margin-top，也好像没有这个代码一样

最后，我试过了

 margin-top: auto;
      margin-bottom: auto;

即使这样也行不通

整个CSS

 #sidebar-wrapper h2 {
     background: url("https://lh6.googleusercontent.com/-FRYoELCr4cs/UWqPgG1XTjI/AAAAAAAAHZs/_825mjRMqrg/s295/54454554+copy.png") no-repeat scroll 0% 0% transparent;
     color: rgb(213, 213, 213);
     height: 50px;
     width:294px;
     margin-top:10x;
     overflow: visible;
     position: relative;
     left: -16px;
     text-align: center;
     color:white;
     margin:0 0 10px
 }

如果我改变最后一行边距，红色背景和标题都会移动(而不是单独的标题)。这是我的 site.有人可以帮我吗。谢谢。

Answer 1

只需在样式中添加一些填充:

#sidebar-wrapper h2 {
     background: url("https://lh6.googleusercontent.com/-FRYoELCr4cs/UWqPgG1XTjI/AAAAAAAAHZs/_825mjRMqrg/s295/54454554+copy.png") no-repeat scroll 0% 0% transparent;
     color: rgb(213, 213, 213);
     height: 50px;
     width:294px;
     margin-top: 10x; /* You have a typo here, is 10px */
     overflow: visible;
     position: relative;
     left: -16px;
     text-align: center;
     color:white;
     margin:0 0 10px
     padding: 7px 0; /* Magic padding */
 }