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

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

每当我使用填充或边距时，它就会碰撞到我正在使用的圆形图像中

#对齐照片{
右边填充：50px；
左侧填充：400px；
}
#结盟公司{
左边距：240像素
}
#对齐图像{
位置：相对位置；
底部：-250px；
}
.包装纸{
背景：#C3C3；
填充：20px；
字体大小：40px；
字体系列：“Helvetica”；
文本对齐：居中；
位置：相对位置；
宽度：600px；
}
.包装工：之后{
内容：“；
宽度：200px；
身高：0；
边框顶部：42px实心透明；
边框底部：42px实心透明；
右边框：40px纯白；
位置：绝对位置；
右：0；
排名：0；
}

玛丽·史密斯
莫里斯房地产与投资公司

您让它变得比需要的复杂了一点。只需将两个元素作为包装（你已经在

alignImage

中设置了一个，将它们设置为显示为

内联块

，然后将

垂直对齐

放在

中间

、

顶部

，或者你喜欢的任何位置。我去掉了所有奇怪的填充，这也会干扰显示。看起来这是你垂直堆栈的延迟。）编辑布局

编辑–您还有两个ID为

alignPhoto

的元素。您确实不应该这样做。如果您需要使用一个规则设置两个不同元素的样式，请改用类

#对齐照片{
显示：内联块；
垂直对齐：中间对齐；
}
#对准照片img{
边界半径：100%；
}
#对齐图像{
位置：相对位置；
}
.对齐文本{
显示：内联块；
垂直对齐：中间对齐；
}
.titleBoldText{text align:right；}

玛丽·史密斯
莫里斯房地产与投资公司

一种快速而肮脏的方式将其包装在表格中，以使垂直对齐也能顺利工作

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

玛丽·史密斯
莫里斯房地产与投资公司

---

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

为此
基本上，你把文本的两段都放在一个固定的div中，然后向左浮动，这一点就足够了

编辑：
为了更简单，您可以使用flexbox进行垂直对齐。

---

我已经更新了答案。

确保元素从左到右正确放置的更有效且可扩展的解决方案之一是使用带有

clear:both；

的包装器div。在这些包装器div中，您可以使用

float:left

或

float:right

。包装器div允许您生成新的“行”

#对齐照片{
浮动：左；
左边距：10px；
}
#profileCompany，#profileName{
显示：块；
宽度：100%；
}
#对齐图像{
浮动：左；
}
.profileWrapper{
浮动：左；
}
/*下面为从后端传递的图像创建一个圆*/
.包装纸{
填充：20px；
字体系列：“Helvetica”；
文本对齐：居中；
位置：相对位置；
宽度：600px；
明确：两者皆有；
}
.profileWrapper:之后{
内容：“；
宽度：200px；
身高：0；
边框顶部：42px实心透明；
边框底部：42px实心透明；
右边框：40px纯白；
/*调整此选项以增加三角形的高度*/
位置：绝对位置；
右：0；
排名：0；
}
.圆圈{
显示：块；
高度：50px；
宽度：50px；
背景色：#cfcfcf；
-moz边界半径：25px；
-webkit边界半径：25px；
-khtml边界半径：25px；
边界半径：25px；
}

玛丽·史密斯
莫里斯房地产与投资公司

注意：您已经获得了两次id

#alignPhoto

。从编写语义标记开始，还要尝试在元素属性值周围使用引号。其中一些元素根本没有引号，即tagHm-我们在一段时间前已经停止使用表进行布局，但这仍然是一个解决方案。另一个途径是路径另一个答案是（将文本包装在包装纸a和图像旁边），但请记住，文本包装纸的大小必须与图像包装纸的大小相同，然后垂直对齐通常会变得一团糟（在这种情况下，不应该这样，CSS上）@BrianLeishman–通常会变得一团糟，怎么会？我从来没有遇到过两个兄弟元素的大问题，使用

vertical align:middle

，前提是它们都是

display:inline block

@joshburges事实上你需要一个“助手”要显示垂直对齐的项目旁边的元素设置为父项高度的100%是荒谬的，而且您不需要将子项设置为任何特殊的值来获得所需的效果。我承认表不是万能的，但在这种情况下，这是最容易维护和最快的解决方案，没有任何d是否有帮助元素？我不知道你在说什么。看看这个。没有帮助，什么都没有。使用表不仅在语义上不正确，而且是大量不必要的标记。更不用说将布局绑定到刚性结构了。

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

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