在同一行上使用文本和图像定位CSS

Question

如何在同一行上对齐文字和图像？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

目前这样做：

我希望的效果如下：

非常感谢任何帮助或建议。

Answer 1

你使它变得比它需要的复杂一点。只需将两个元素作为包装器（IXLWorksheets中已包含一个元素，将它们设置为显示为alignImage，然后将inline-block设置为vertical-align，middle，或者你喜欢的任何东西。我摆脱了所有奇怪的填充物，这也是显示器的混乱。看起来这是你垂直堆叠布局的延续。

修改 - 您还有两个ID top的元素。你真的，真的不应该这样做。如果您需要使用一个规则设置两个不同的元素，请使用类。

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

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>