如何將徽標對齊到WordPress？

Question

我該如何居中對齊此標題上的徽標？還想知道如何爲標題背景顏色啓用背景透明度並更改徽標最大尺寸的值。這是標題部分的CSS條目。

#header { 
    display: block; 
    position: relative; 
    z-index: 600; 
    /* Higher than the sidebar widget and widget container, sliders */ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background: #2F2E3C; } 
    #header > .inner { 
    position: relative; } 
    #header > .inner > .wrap { 
     position: relative; 
     min-height: 76px; } 
    @media only screen and (max-width: 1024px) { 
    #header > .inner > .warp { 
     min-height: 80px; } } 
    @media only screen and (max-width: 767px) { 
    #header > .inner { 
     text-align: center; } 
     #header > .inner > .wrap { 
     min-height: 40px; } } 

#header.sticky { 
    position: fixed; 
    z-index: 999; 
    width: 100%; } 
    @media only screen and (max-width: 767px) { 
    #header.sticky { 
     position: static !important; } } 
    #header.sticky .wrap { 
    min-height: 0; } 
    .boxed #header.sticky { 
    max-width: 1180px; 
    width: 96%; } 
    .admin-bar #header.sticky { 
    top: 32px; } 
    #header.sticky #site-logo { 
    top: 10px; } 
    #header.sticky .dropdown-menu-wrap > ul.menu > li > ul.sub-menu { 
    top: 60px; } 
    #header.sticky #primary-menu > ul.menu > li > a { 
    line-height: 60px; } 
    #header.sticky #top-header-area { 
    display: none; } 

#site-logo { 
    position: relative; 
    display: inline-block; 
    float: left; 
    left: 0; 
    top: 30px; 
    line-height: 0; 
    margin: 0; } 
    #site-logo a { 
    font-size: 28px; 
    color: #494D4E; 
    line-height: 36px; 
    direction: ltr; 
    display: block; 
    text-align: left; 
    /* Do not let logo get bigger than the header */ 
    font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; } 
    @media only screen and (max-width: 767px) { 
     #site-logo a { 
     display: inline-block; 
     text-align: center; } } 
    #site-logo a img { 
     max-height: 100%; 
     max-width: 100%; } 
    @media only screen and (max-width: 767px) { 
    #site-logo { 
     display: block; 
     float: none; 
     position: relative; 
     margin: 0 auto; 
     top: 0; 
     padding: 10px 0; } 
     #site-logo a img { 
     max-width: 75%; 
     margin: 0 auto; } } 

#site-description { 
    margin: 0; } 

#container { 
    background: #f7f7f7; 

編輯：

#header { 
    display: block; 
    position: relative; 
    z-index: 600; 
    /* Higher than the sidebar widget and widget container, sliders */ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background: #2F2E3C; } 
    #header > .inner { 
    position: relative; } 
    #header > .inner > .wrap { 
     position: relative; 
     min-height: 76px; } 
    @media only screen and (max-width: 1024px) { 
    #header > .inner > .warp { 
     min-height: 80px; } } 
    @media only screen and (max-width: 767px) { 
    #header > .inner { 
     text-align: center; } 
     #header > .inner > .wrap { 
     min-height: 40px; } } 

#header.sticky { 
    position: fixed; 
    z-index: 999; 
    width: 100%; } 
    @media only screen and (max-width: 767px) { 
    #header.sticky { 
     position: static !important; } } 
    #header.sticky .wrap { 
    min-height: 0; } 
    .boxed #header.sticky { 
    max-width: 1180px; 
    width: 96%; } 
    .admin-bar #header.sticky { 
    top: 32px; } 
    #header.sticky #site-logo { 
    top: 10px; } 
    #header.sticky .dropdown-menu-wrap > ul.menu > li > ul.sub-menu { 
    top: 60px; } 
    #header.sticky #primary-menu > ul.menu > li > a { 
    line-height: 60px; } 
    #header.sticky #top-header-area { 
    display: none; } 

#site-logo { 
    position: relative; 
    float: left; 
    left: 0; 
    top: 30px; 
    line-height: 0; 
    margin: 0; } 
    #site-logo a { 
    font-size: 28px; 
    color: #494D4E; 
    line-height: 36px; 
    direction: ltr; 
    display: block; 
    text-align: left; 
    /* Do not let logo get bigger than the header */ 
    font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; } 
    @media only screen and (max-width: 767px) { 
     #site-logo a { 
     display: inline-block; 
     text-align: center; } } 
    #site-logo a img { 
     margin:auto; 
     max-height: 100%; 
     max-width: 100%; } 
    @media only screen and (max-width: 767px) { 
    #site-logo { 
     display: block; 
     float: none; 
     position: relative; 
     margin: 0 auto; 
     top: 0; 
     padding: 10px 0; } 
     #site-logo a img { 
     max-width: 75%; 
     margin: 0 auto; } } 

#site-description { 
    margin: 0; } 

#container { 
    background: #f7f7f7; } 

Answer 1

刪除display: inline-block;從#site-logo再加入margin:auto;到#site-logo a img。

編輯：我也注意到你有#site-logofloat:center;這是不是有效的屬性，所以我會考慮取消它，因爲它是多餘的。