文本和图像在同一行的 CSS 定位

Question

如何将我的文本和图像对齐在同一行？

每当我使用 padding 或 margins 时，它就会崩溃到我正在使用的圆形图像中。

#alignPhoto {
  padding-right: 50px;
  padding-left: 400px;
}
#alignCompany {
  margin-left: 240px
}
#alignImage {
  position: relative;
  bottom: -250px;
}

.wrapper {
  background: #C3C3C3;
  padding: 20px;
  font-size: 40px;
  font-family: 'Helvetica';
  text-align: center;
  position: relative;
  width: 600px;
}
.wrapper:after {
  content: "";
  width: 200px;
  height: 0;
  border-top: 42px solid transparent;
  border-bottom: 42px solid transparent;
  border-right: 40px solid white;
  position: absolute;
  right: 0;
  top: 0;
}

<div id="alignPhoto">
  <div class="circle" id=image role="image">
    <img src="http://placehold.it/42x42">
  </div>
</div>
<div id=alignPhoto class="titleBoldText">Mary Smith</div>
<div id=alignCompany class="titleText">Morris Realty and Investments</div>
<br>

目前它是这样做的:

我想要的效果是这样的:

如有任何帮助或建议，我们将不胜感激。

Answer 1

你让它变得比它需要的更复杂了。只需将两个元素作为包装器(一个你已经在 alignImage 中，将它们设置为显示为 inline-block 然后将 vertical-align到 middle，top，或任何你喜欢的。我去掉了所有奇怪的填充，它也弄乱了显示。看起来那是你的遗留下来的垂直堆叠布局。

编辑 – 您还有两个 ID 为 alignPhoto 的元素。你真的，真的不应该那样做。如果您需要使用一条规则设置两个不同元素的样式，请改用类。

#alignPhoto {
  display: inline-block;
  vertical-align: middle;
}
#alignPhoto img {
  border-radius: 100%;
}
#alignImage {
  position: relative;
}
.alignText {
  display: inline-block;
  vertical-align: middle;
}
.titleBoldText { text-align: right; }

<div class="alignText">
    <div class="titleBoldText">Mary Smith</div>
    <div id=alignCompany class="titleText">Morris Realty and Investments</div>
</div>
<div id="alignPhoto">
  <div class="circle" id=image role="image">
    <img src="http://placehold.it/42x42">
  </div>
</div>
<br>