0
Beachten Sie die folgenden Banner Ich habe: "Ihr Go To Stop"CSS kann nicht zentriert Text in Div
Ich mag die "Meine Website" und Text, um sowohl vertikal als auch horizontal auszurichten, aber ich habe Schwierigkeiten, das zu passieren.
JS Fiddle: 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>Ich bin mir bewusst, dass das Bild oben nicht wie die Ausgabe von JS Fiddle sieht und ich weiß, dass das, was ich bin immer auf meiner Testseite ist eher ein Zufall als die tatsächliche Ausgabe.
Kann mir jemand helfen, dass mein CSS funktioniert, so dass der gesamte Text vertikal in den Zellen ausgerichtet und horizontal über das Logo ausgerichtet ist?
Vielen Dank im Voraus.
Flexbox-Methode: http://StackOverflow.com/a/33049198/3597276 –