将文本与图像对齐？ CSS答案

【问题标题】：Aligning text with an Image? CSS将文本与图像对齐？ CSS
【发布时间】：2016-06-19 11:53:38
【问题描述】：

我正在尝试将我的文字放在照片左侧的一个漂亮的方形容器中。看起来应该很容易，但我一定错过了一些东西。在做了一些研究之后，我发现使用：“vertical-align”“display-inline”或“float”命令，但我没有成功使用其中任何一个。我的代码有问题吗？还是我应该研究另一个样式命令？

感谢您的帮助！

这是 jsfiddle：https://jsfiddle.net/d7c99nkw/

代码如下：

/* Cover */
#tom {
	position: relative;
	bottom: 40px;
	left: 45%;
	min-width: 55%;
	max-width: 55%;
	padding: 12px;
	-webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white));
}

.cover {
	vertical-align: left;
	padding: 36px;
	float: left;
	

}

<div class="cover">
			<img src="https://lh3.googleusercontent.com/-rVoVQQOFHSk/VUZaG4-rTKI/AAAAAAAAADI/1CvHapoyTOE/w569-h569/derp_boosic.png" id="tom" alt="tomphoto">
				<p id="intro">My name is Thomas. I'm an upbeat, self-motivated people person with an affinity for technology, business, people, and all things creative. In my proffessional career in Sales and IT, I've consistently gone above and beyond sales, and customer service, expecations and have been exceptionally successful. I account my success to my natural ability to build relationships with, and relate to people easily. I also practice a vigorous planning, and goal setting lifestyle which allows me to acheive what I set out to do. I know with my personailty, skills, and drive to be successful. Nothing will stop my from reaching my goals. </p>
			</div>

【问题讨论】：

-webkit-box-reflect 不再受支持...请谨慎使用。

标签： html css image alignment vertical-alignment

【解决方案1】：

这是一个可行的解决方案：jsfiddle

在#tom css 规则中，去掉left: 45% 规则并添加float: right;

#tom {
position: relative;
bottom: 40px;
/*REMOVE left: 45%;*/
min-width: 55%;
max-width: 55%;
padding: 12px;
-webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white));
float: right;
}

正如 Paulie_D 所说，-webkit-box-reflect 不再受支持。

【讨论】：

太棒了，非常感谢您对我的帮助！也感谢 -webkit 提示！

【解决方案2】：

您好，您的代码存在一些问题，您需要为两个相邻的对象指定一个 display: inline-block a 和一个不错的宽度。接下来你必须交换 html 元素，查看我在你的 jsfiddle 上的更新。

https://jsfiddle.net/d7c99nkw/4/

【讨论】：

【解决方案3】：

我为你更正了 CSS：

/* Cover */
#tom{
    bottom: 40px;
    left: 45%;
    min-width: 55%;
    max-width: 55%;
    padding: 12px;
    -webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white));
}
.cover img{
           float: right;
}

【讨论】：