html - 对齐没有 float 或内联 block 的元素

Question

我需要将元素左对齐，目前它们在彼此下方。如果我使用 float 或 inline-block，它会搞砸垂直居中的文本(它需要是动态的，因为可能只有一行)。这是我得到的:

#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>

为任何能为我提供帮助的人干杯!

编辑:对不起，它不清楚 - img 在左边，文本在 img 旁边(在 img 的右边)彼此重叠(就像一个段落的 2 行，除了 h1 更大)。文本垂直居中，但它们并不总是在那里，所以我需要它们在发生这种情况时重新居中。

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>

希望对您有所帮助!