CSS 修复 Wordpress 中 Chrome 的垂直徽标对齐问题答案

【问题标题】：CSS to fix vertical logo alignment in Wordpress issue with ChromeCSS 修复 Wordpress 中 Chrome 的垂直徽标对齐问题
【发布时间】：2018-07-22 01:12:30
【问题描述】：

Windows 10 上的 Firefox 中 http://bigidearesults.com/ 的站点徽标垂直对齐是正确的并且垂直居中，但 Windows 10 上的 Chrome 出于某种原因将徽标对齐到顶部。

logo图片嵌套在多个div中：

 <div id="site-banner" class="cf nothing logo">
    <div id="site-banner-main" class="no-right">
      <div id="site-banner-left">
        <div id="site-banner-left-inner">
          <div class="site-branding">
              <h1 class="site-logo"><a href="http://bigidearesults.com/" rel="home"><img src="http://bigidearesults.com/wp-content/uploads/2016/06/logo.png" alt="logo" /></a>

请告诉我在 Win 10 上让这个徽标在 Chrome 中垂直居中的 CSS 代码，就像在 FireFox 中一样。

谢谢。

【问题讨论】：

标签： css wordpress windows google-chrome

【解决方案1】：

你可以通过 flexbox 解决你的问题。您只需在 #site-banner-left-inner 选择器上添加下一个代码。它对大多数浏览器都很友好。

display: flex;
justify-content: flex-start;
align-items: center;

阅读更多here 相关信息。您可以轻松解决 Chrome 的问题。

【讨论】：

做到了。谢谢！

【解决方案2】：

从#masthead_TesseractTheme .site-branding（第416行）和.site-branding（第402行）中去掉display:table，所以display:table-cell形成其他（ ?) #masthead_TesseractTheme .site-branding (line 67) 被应用修复了这个问题。

那里有很多相互矛盾的规则。

【讨论】：