CSS無法居中文字事業部

Question

遵守以下橫幅我：「你進入停止」

我希望「我的主頁」和文本垂直和水平對齊，但我很難得到這種情況發生。

JS小提琴：http://jsfiddle.net/z63234p1/

masthead { 
 
    top: 32px; 
 
    padding-right: 0px; 
 
    background: #000; 
 
    padding-left: 0; 
 
    max-height: 100px; 
 
    border-bottom: none; 
 
    position: fixed; 
 
    z-index: 3; 
 
    width: 100%; 
 
    min-height: 73px; 
 
    color: #000; 
 
    display: block; 
 
    box-sizing: inherit; 
 
} 
 

 
.sidebar-toggle { 
 
    float: left; 
 
    border: 3px solid grey; 
 
    border-right: none; 
 
    height: 82px; 
 
    margin-right: 0; 
 
    width: 5%; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    color: #000; 
 
    text-align: center; 
 
} 
 

 
button { 
 
    border-radius: 0; 
 
    transition: all 125ms ease-out; 
 
    cursor: pointer; 
 
    -webkit-appearance: button; 
 
    font-size: 100%; 
 
    margin: 0; 
 
    max-width: 100%; 
 
    vertical-align: baseline; 
 
    line-height: 1.5; 
 
    display: inline-block; 
 
    align-items: flex-start; 
 
} 
 

 
.screen-reader-text { 
 
    clip: rect(1px, 1px, 1px, 1px); 
 
    position: absolute !important; 
 
    height: 1px; 
 
    width: 1px; 
 
    overflow: hidden; 
 
} 
 

 
.sidebar-toggle:before { 
 
    content: "\f419"; 
 
    height: 24px; 
 
    width: 16px; 
 
    color: inherit; 
 
    font-size: 16px; 
 
    line-height: 24px; 
 
    speak: none; 
 
    text-decoration: inherit; 
 
    vertical-align: top; 
 
    font-style: normal; 
 
    font-weight: normal 
 
    display: inline-block; 
 
    font-family: Genericons; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
.site-branding { 
 
    width: 95%; 
 
    display: inline-flex; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    float: left; 
 
    max-width: 100%; 
 
} 
 

 
#sitelogo { 
 
    display: inline-flex; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.site-title { 
 
    border: 3px solid grey; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    font-weight: normal; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    line-height: normal; 
 
    min-width: 150px; 
 
    padding: 3px 8px; 
 
    font-size: 6vh; 
 
    height: 100%; 
 
    color: white; 
 
    float: left; 
 
    max-width: 100%; 
 
} 
 

 
h1 { 
 
    clear: both; 
 
} 
 

 
.site-description { 
 
    background: #fff500; 
 
    color: black; 
 
    display: block; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    margin: auto auto; 
 
    text-align: center; 
 
    height: 100%; 
 
    border-left: none; 
 
    border-top: 3px solid grey; 
 
    border-bottom: 3px solid grey; 
 
    border-right: 3px solid grey; 
 
    display: block; 
 
    padding: 0 16px; 
 
    font-size: 3vh; 
 
    line-height: 2.3; 
 
    float: left; 
 
    clear: none; 
 
}

<header id="masthead" class="site-header" role="banner"> 
 
    <button class="sidebar-toggle" aria-expanded="false" ><span class="screen-reader-text"><?php _e('Toggle Sidebar', 'boardwalk'); ?></span></button> 
 
    <div class="site-branding"> 
 
    <div id="sitelogo" class="clear"> 
 
     <h1 class="site-title"><a href="http://test.com" rel="home">My Website</a></h1> 
 
     <h2 class="site-description">Your Go To Stop</h2> 
 
    </div> 
 
    </div> 
 
</header>

我知道，上面的圖片不看都像JS小提琴的輸出，我知道什麼，我得到在我的測試網站上是一個僥倖而非實際輸出。

有人可以幫我搞定我的CSS，這樣所有的文本都在它們的單元格內垂直對齊，並橫跨徽標水平對齊嗎？

預先感謝您。

Answer 1

使用這個CSS：

<style type="text/css"> 
    #masthead { 
    top: 32px; 
    padding-right: 0px; 
    background: #000; 
    padding-left: 0; 
    max-height: 100px; 
    border-bottom: none; 
    position: fixed; 
    z-index: 3; 
    width: 100%; 
    min-height: 73px; 
    color: #000; 
    display: block; 
    box-sizing: inherit; 
} 

.sidebar-toggle { 
    float: left; 
    border: 3px solid grey; 
    border-right: none; 
    height: 73px; 
    margin-right: 0; 
    width: 5%; 
    overflow: hidden; 
    padding: 0; 
    color: #000; 
    text-align: center; 
} 

button { 
    border-radius: 0; 
    transition: all 125ms ease-out; 
    cursor: pointer; 
    -webkit-appearance: button; 
    font-size: 100%; 
    margin: 0; 
    max-width: 100%; 
    vertical-align: baseline; 
    line-height: 1.5; 
    display: inline-block; 
    align-items: flex-start; 
} 

.screen-reader-text { 
    clip: rect(1px, 1px, 1px, 1px); 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
} 

.sidebar-toggle:before { 
    content: "\f419"; 
    height: 24px; 
    width: 16px; 
    color: inherit; 
    font-size: 16px; 
    line-height: 24px; 
    speak: none; 
    text-decoration: inherit; 
    vertical-align: top; 
    font-style: normal; 
    font-weight: normal 
    display: inline-block; 
    font-family: Genericons; 
    -webkit-font-smoothing: antialiased; 
} 

.site-branding { 
    width: 95%; 
    display: inline-flex; 
    margin-top: 0; 
    margin-bottom: 0; 
    float: left; 
    max-width: 100%; 
} 

#sitelogo { 
    display: inline-flex; 
    vertical-align: middle; 
    text-align: center; 
} 

.site-title { 
    border: 3px solid grey; 
    font-family: Impact, Charcoal, sans-serif; 
    font-weight: normal; 
    margin: 0 auto; 
    text-align: center; 
    line-height: normal; 
    min-width: 150px; 
    padding: 4px 8px; 
    font-size: 6vh; 
    height: 100%; 
    color: white; 
    float: left; 
    max-width: 100%; 
} 

h1 { 
    clear: both; 
} 

.site-description { 
    background: #fff500; 
    color: black; 
    font-family: Impact, Charcoal, sans-serif; 
    margin: auto auto; 
    text-align: center; 
    height: 100%; 
    border-left: none; 
    border-top: 3px solid grey; 
    border-bottom: 3px solid grey; 
    border-right: 3px solid grey; 
    display: block; 
    padding: 6px 16px; 
    font-size: 3vh; 
    line-height: 2.3; 
    float: left; 
    clear: none; 
} 
</style> 

Answer 2

新的CSS爲#sitelogo：

display: inline-flex; 
align-items: stretch; 

新的CSS爲.site-title：

border: 3px solid grey; 
font-family: Impact, Charcoal, sans-serif; 
font-weight: normal; 
min-width: 150px; 
padding: 3px 8px; 
font-size: 6vh; 
color: white; 
display: flex; 
align-items: center; 
justify-content: center; 

新的CSS爲.site-description：

background: #fff500; 
color: black; 
font-family: Impact, Charcoal, sans-serif; 
border-left: none; 
border-top: 3px solid grey; 
border-bottom: 3px solid grey; 
border-right: 3px solid grey; 
padding: 0 16px; 
font-size: 3vh; 
display: flex; 
align-items: center; 
justify-content: center; 

除此之外，我強烈建議不要使用vh作爲font-size。

Answer 3

我搞砸了你的線條高度site-title以及線條高度和高度site-description。這裏是我的結果：

masthead { 
    top: 32px; 
    padding-right: 0px; 
    background: #000; 
    padding-left: 0; 
    max-height: 100px; 
    border-bottom: none; 
    position: fixed; 
    z-index: 3; 
    width: 100%; 
    min-height: 73px; 
    color: #000; 
    display: block; 
    box-sizing: inherit; 
} 

.sidebar-toggle { 
    float: left; 
    border: 3px solid grey; 
    border-right: none; 
    height: 82px; 
    margin-right: 0; 
    width: 5%; 
    overflow: hidden; 
    padding: 0; 
    color: #000; 
    text-align: center; 
} 

button { 
    border-radius: 0; 
    transition: all 125ms ease-out; 
    cursor: pointer; 
    -webkit-appearance: button; 
    font-size: 100%; 
    margin: 0; 
    max-width: 100%; 
    vertical-align: baseline; 
    line-height: 1.5; 
    display: inline-block; 
    align-items: flex-start; 
} 

.screen-reader-text { 
    clip: rect(1px, 1px, 1px, 1px); 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
} 

.site-branding { 
    width: 95%; 
    display: inline-flex; 
    margin-top: 0; 
    margin-bottom: 0; 
    float: left; 
    max-width: 100%; 
} 

#sitelogo { 
    display: inline-flex; 
    vertical-align: middle; 
    text-align: center; 
} 

.site-title { 
    border: 3px solid grey; 
    font-family: Impact, Charcoal, sans-serif; 
    font-weight: normal; 
    margin: 0 auto; 
    text-align: center; 
    line-height: 58px; 
    min-width: 150px; 
    padding: 3px 8px; 
    font-size: 6vh; 
    height: 100%; 
    color: white; 
    float: left; 
    max-width: 100%; 
} 

h1 { 
    clear: both; 
} 

.site-description { 
    background: #fff500; 
    color: black; 
    display: block; 
    font-family: Impact, Charcoal, sans-serif; 
    margin: auto auto; 
    text-align: center; 
    height: 108%; 
    border-left: none; 
    border-top: 3px solid grey; 
    border-bottom: 3px solid grey; 
    border-right: 3px solid grey; 
    display: block; 
    padding: 0 16px; 
    font-size: 3vh; 
    line-height: 3.7; 
    float: left; 
    clear: none; 
} 

.sidebar-toggle:before { 
    content: "\f419"; 
    height: 24px; 
    width: 16px; 
    color: inherit; 
    font-size: 16px; 
    line-height: 24px; 
    speak: none; 
    text-decoration: inherit; 
    vertical-align: top; 
    font-style: normal; 
    font-weight: normal display: inline-block; 
    font-family: Genericons; 
    -webkit-font-smoothing: antialiased; 
} 

這裏有一個差異比較一下，看的區別：http://www.mergely.com/vGQedH1p/這就是你要找的東西？