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

Question

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

每当我使用填充或边距时，它都会崩溃到我正在使用的圆形图像中。

#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 或任何你喜欢的东西。我摆脱了所有奇怪的填充，它也弄乱了显示。看起来那是你垂直堆叠布局的保留。

Edit – 您还有两个 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>

Answer 2

一种快速而肮脏的方式将其包裹在表格中，以使您的垂直对齐工作也没有任何问题。

<table>
    <tr>
        <td>
            <div id="alignPhoto" class="titleBoldText">Mary Smith</div>
            <div id="alignCompany" class="titleText">Morris Realty and Investments</div>
        </td>
        <td>
            <img src="image/url" alt=""/>
        </td>
    </tr>
</table>

http://jsfiddle.net/7m5s6gd7/

Answer 3

稍微简单一点的版本怎么样：
HTML：

<div id="alignPhoto">
    <div class="content-wrapper">
        <p>Mary Smith</p>
        <p>Morris Realty and Investments</p>
    </div>
    <div class="image-wrapper" id="image" role="image">
        <img src="http://placehold.it/250x200" />
    </div>
</div> 

CSS：

.content-wrapper { float:left; }
.image-wrapper img { border-radius:50%; }
#alignPhoto {
  display: flex;
  flex-direction: row;
  align-items: center;
}

JSFiddle为此
基本上，您将两段文本保存在一个 div 中并将其浮动到左侧。仅此一项就可以完成工作。

编辑：
为了使其更简单，您可以使用 flexbox 进行垂直对齐。
我已经更新了答案。

Answer 4

确保元素从左到右正确放置的更有效和可扩展的解决方案之一是使用带有clear:both; 的包装器 div。在这些包装器 div 中，您可以使用 float:left 或 float:right。包装器 div 允许您生成新的“行”。

#alignPhoto {
  float: left;
  margin-left: 10px;
}
#profileCompany, #profileName {
  display:block;
  width:100%;
}
#alignImage {
  float: left;
}
.profileWrapper {
    float:left;
}
/* Below creates a circle for the image passed from the backend */

.wrapper {
  padding: 20px;
  font-family: 'Helvetica';
  text-align: center;
  position: relative;
  width: 600px;
  clear: both;
}
.profileWrapper:after {
  content: "";
  width: 200px;
  height: 0;
  border-top: 42px solid transparent;
  border-bottom: 42px solid transparent;
  border-right: 40px solid white;
  /* Tweak this to increase triangles height */
  position: absolute;
  right: 0;
  top: 0;
}
.circle {
  display: block;
  height: 50px;
  width: 50px;
  background-color: #cfcfcf;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  -khtml-border-radius: 25px;
  border-radius: 25px;
}

<div class="wrapper">

    <div class="profileWrapper">
        <div id=profileName class="titleBoldText">Mary Smith</div>
        <div id=profileCompany class="titleText">Morris Realty and Investments</div>
    </div>
    <div id="alignPhoto">
      <div class="circle" id=image role="image">
        
      </div>
    </div>
</div>