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

I am trying to align the text vertically with logo on the left, however it doesn't seem to be working. Any suggestions? Here is the css code:

我试图将文本垂直对齐左侧的徽标,但它似乎没有工作。有什么建议?这是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 code:

</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>

2 个解决方案

#1

Adding to your CSS page in Wordpress:

在Wordpress中添加到CSS页面:

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

This will pull your text down to center with the img (if it isn't exactly what you would like, adjust the line-height)

这将使用img将文本拉到中心(如果它不是您想要的,请调整行高)

Happy Coding :)

快乐编码:)

#2

hard to say without all the details to visualize, but an easy trick is to set your line-height to the height of the element. assuming your logo and text have the same height here at 135px, set line-height:35px on your title

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

#1