试图在div内并排获取图片和文字

Question

我一直在寻找这个并发现了很多类似的案例，但无论出于何种原因，解决方案在我的方案中都不起作用。

文字和图片叠加在一起。我无法将它保存在headerBlock div中，但并排。

＆＃13;

＆＃13;

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
}

div.headerText {
  vertical-align: middle;
  text-align: justify;
}

div.headerImg img {
  vertical-align: middle;
}

＆＃13;

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg"><img src="/somepicturehere">
    </div>
  </div>

  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>

  <div id="rightBlock"></div>

  <div id="footerBlock"></div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您制作.headerText和.headerImg display: inline-block;，那么应该这样做。

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}
div.headerImg img {
  vertical-align: middle;
}

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

如果您想垂直对齐它们，请在容器上使用display: flex;和align-items: center;：

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
  display: flex;
  align-items: center;
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

Answer 2

在父级上使用display: flex，这将创建一个并排显示子项的行。然后，您还可以使用其他弹性属性（如align-items和justify-content）水平/垂直对齐。

＆＃13;

＆＃13;

#wrap { 
width: 800px; 
margin: 0 auto; 
overflow: hidden;
float: left;
}

#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
text-align: justify;
}

div.headerImg img {
vertical-align: middle;
}

＆＃13;

<div id="wrap">
<div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg"><img src="/somepicturehere">
    </div>
</div>

<!--Ignore these, it's for future use-->
<div id="leftBlock"></div>

<div id="rightBlock"></div>

<div id="footerBlock"></div>

</div>

＆＃13;

＆＃13;

＆＃13;