将文本与图像对齐？ CSS

Question

我正在尝试将我的文字放在照片左侧的漂亮方形容器中。看起来应该很容易，但我一定遗漏了一些东西。在做了一些研究后，我发现可以使用："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>

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

Answer 2

您好，您的代码有几处错误，您需要为彼此相邻的两个对象提供一个 display: inline-block 一个合适的宽度。接下来你必须交换 html 元素，查看我对你的 jsfiddle 的更新。

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

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

将文本与图像对齐？ CSS

Aligning text with an Image? CSS

html

css

image

alignment

vertical-alignment