Question

我正在尝试将文本垂直对齐左侧的徽标，但它似乎不起作用。有什么建议？这是css代码：

* logo above site title */
#site-title a {
    background: url('http://www.cultsotters.org.uk/images/cults_otters_black.png');
    background-repeat: no-repeat;
    display: block;
    height: 135px;
     margin: 0;
  text-align: center;
   width: auto;


}
    #branding hgroup {
    text-align: center; display: inline; margin:0; align:center;}

    #site-title, #site-description {
    margin: 0 auto; text-align: center; 
    }

HTMl代码：

</head>

<body class="home blog logged-in admin-bar no-customize-support custom-background single-author two-column right-sidebar">
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="http://cultsotters.org.uk/" rel="home">Cults Otters Amateur Swimming Club</a></span></h1>
                <h2 id="site-description"></h2>
            </hgroup>

Answer 1

很难说没有可视化的所有细节，但一个简单的技巧是将行高设置为元素的高度。假设您的徽标和文字在135px处具有相同的高度，请在标题上设置line-height:35px

Answer 2

在Wordpress中添加到您的CSS页面：

#site-title > span > a {
    line-height: 105px;
}

这将使用img将文本拉到中心（如果它不是您想要的，请调整line-height）

快乐编码：）

将徽标与文本对齐 - 二十一个孩子主题（Wordpress）

2 个答案: