浮動小数点またはインラインブロックなしに要素を配置する

Question

要素を左に揃える必要があります。現在、要素は互いに下にあります。フロートまたはインラインブロックを使用する場合は、垂直に配置されたテキストをねじ込みます（動的である必要があるのは、1つの行だけです）。ここで私が持っているものです：私はいくつかの助けを提供することができます誰にでも

#header-bar-content-wrapper { 
 
    max-width: 1170px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    color: #000; 
 
    text-align: left; 
 
} 
 

 
#nav-brand-container { 
 
    height: 90px; 
 
    text-align: left; 
 
} 
 

 
#header-logo { 
 
    height: 70px; 
 
    margin: 10px 24px 10px 0; 
 
} 
 

 
.nav-home-button { 
 
    height: 90px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
} 
 

 
.nav-home-button a, 
 
.nav-home-button a:active, 
 
.nav-home-button a:visited { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.nav-home-button .button-text { 
 
    margin: 0; 
 
    float: none; 
 
} 
 

 
.nav-home-button h1 { 
 
    font-weight: 300; 
 
}

<div id='header-bar-content-wrapper'> 
 
    <div id='nav-brand-container'> 
 
    <a href='http://localhost:8888/nt' title='Test Site Name'> 
 
     <img id="header-logo" src="http://localhost:8888/nt/wp-content/uploads/2016/01/height100px.png"> </a> 
 
    <div class='nav-home-button'> 
 
     <a href='http://localhost:8888/nt' title='Test Site Name'> 
 
     <h1 class='button-text'>Test Site Name</h1> 
 
     <p class='button-text'>This is a test website for a test theme.</p> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

乾杯！

EDIT：imgの左側にimgがあり（imgの右側にある）、imgの隣にテキストがあります（h1以外の段落の2行が大きい） 。テキストは垂直にセンタリングされていますが、常にそこにあるわけではありませんので、そのときに再センタリングする必要があります。

Answer 1

これはあなたのニーズに十分です

#header-bar-content-wrapper { 
 
    max-width: 1170px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    color: #000; 
 
    text-align: left; 
 
} 
 

 
#nav-brand-container { 
 
    height: 90px; 
 
    text-align: left; 
 
} 
 

 
#header-logo { 
 
    height: 70px; 
 
    margin: 10px 24px 10px 0; 
 
} 
 

 
.nav-home-button { 
 
    border: 1px solid red; 
 
    height: 90px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
} 
 

 
.nav-home-button a, 
 
.nav-home-button a:active, 
 
.nav-home-button a:visited { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.nav-home-button .button-text { 
 
    margin: 0; 
 
    float: none; 
 
    display: inline-flex; 
 
    vertical-align: middle; 
 
    border: 1px solid blue; 
 
} 
 

 
.nav-home-button h1 { 
 
    font-weight: 300; 
 
}

<div id='header-bar-content-wrapper'> 
 
    <div id='nav-brand-container'> 
 
    <a href='http://localhost:8888/nt' title='Test Site Name'> 
 
     <img id="header-logo" src="http://localhost:8888/nt/wp-content/uploads/2016/01/height100px.png"> </a> 
 
    <div class='nav-home-button'> 
 
     <a href='http://localhost:8888/nt' title='Test Site Name'> 
 
     <h1 class='button-text'>Test Site Name</h1> 
 
     <p class='button-text'>This is a test website for a test theme.</p> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

それが役に立てば幸い！

Answer 2

このCSSを使用し

.nav-home-button .button-text{ 
     margin: 0; 
     float: none; 
     display: initial; 
     } 

Answer 3

答えをあなたにミスターリスターをありがとうございました！

#header-bar-content-wrapper { 
 
    max-width: 1170px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    color: #fff; 
 
    text-align: left; 
 
} 
 

 
#nav-brand-container { 
 
    height: 90px; 
 
    text-align: left; 
 
    display: table; 
 
} 
 

 
#nav-brand-container > * { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
#header-logo { 
 
    height: 70px; 
 
    margin: 10px 24px 10px 0; 
 
} 
 

 
.nav-home-button a, 
 
.nav-home-button a:active, 
 
.nav-home-button a:visited { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.nav-home-button .button-text{ 
 
    margin: 0; 
 
} 
 

 
.nav-home-button h1{ 
 
    font-weight: 300; 
 
}

<div id='header-bar-content-wrapper'> 
 
    <div id='nav-brand-container'> 
 
    <a href='http://localhost:8888/nt' title='Test Site Name'> 
 
     <img id="header-logo" src="http://localhost:8888/nt/wp-content/uploads/2016/01/height100px.png"> </a> 
 
    <div class='nav-home-button'> 
 
     <a href='http://localhost:8888/nt' title='Test Site Name'> 
 
     <h1 class='button-text'>Test Site Name</h1> 
 
     <p class='button-text'>This is a test website for a test theme.</p> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

あまりにも彼らの助けを申し出皆ありがとう。