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 中，以使您的垂直对齐也能毫无问题地工作。

<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 允许您生成新的 "row".

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

CSS 文字和图片定位在同一行

CSS Positioning with Text and Images on Same Line

css

margin

padding