Question

在我的补充工具栏中，我为H2标题设置了红色背景图像。

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

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

http://img.ctrlv.in.s3.amazonaws.com/img/516ad63d351e9.jpg

它只是水平居中而不是垂直居中。我添加了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;
    overflow: visible;
    position: relative;
    left: -16px;
    text-align: center;
    color:white;
    margin:0 0 10px;
    line-height:50px;
}

Answer 2

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

#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 */
 }

Answer 3

你可以将它添加到你的CSS中：
padding-top: 7px;

Answer 4

您可以使用相对定位。尝试顶部：10px。

如何用css为H2标题标签留下一些顶级空白

4 个答案: