1

在我的边栏中，我有一个红色背景图像作为 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
 }

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

4

4 回答 4

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;
    overflow: visible;
    position: relative;
    left: -16px;
    text-align: center;
    color:white;
    margin:0 0 10px;
    line-height:50px;
}
于 2013-04-14T16:34:51.093 回答
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 */
 }
于 2013-04-14T16:36:30.020 回答
2

您可以将其添加到您的 CSS：
padding-top: 7px;

于 2013-04-14T16:37:46.147 回答
1

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

于 2013-04-14T16:48:10.213 回答