Question

我需要将元素对齐到左边，目前它们正在彼此之下。如果我使用float或inline-block，它会将垂直居中的文本（需要动态，因为可能只有一行）拧紧。这就是我所拥有的：

＆＃13;

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

＆＃13;

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

＆＃13;

为能给我一些帮助的人欢呼！

编辑：对不起它不清楚 - img在左边，文字在彼此的顶部（比如h1的2行，除了h1更大）旁边的img（在右侧） img）。文本是垂直居中的，但它们并不总是存在，所以我需要它们在发生时重新居中。

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

谢谢Lister先生的回答！

＆＃13;

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

＆＃13;

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

＆＃13;

感谢所有提供帮助的人。

将没有浮动或内联块的元素对齐

3 个答案: