文本到图像的中心或右上角,并继续以这种方式对齐文本

时间:2017-09-11 09:26:26

标签: html css

所以我知道这已被问到,我希望我的文字与我的图像的顶部或中间右侧对齐,但是,在所有示例中,一个衬垫工作得很好,但是当我添加额外的线条时,它们会跳到底部或在图像下。这是我的例子

*img style="vertical-align:middle"src="/images/Logo/Eutopian-Trader-Favicon-E-200-??
200.jpg" width="75px" alt="Welcome To Eutopian Trader"> *span style="">At Eutopian Trader we pride ourselves with providing you an >>  unparrelled Customer Experience. ensuring we have the products you want, and >> the Customer Serivce you expect. 

* / 当文本呈现时,只有它们的第一行正确对齐,文本的其余部分向下移动到图像下方。我基本上寻找的东西看起来像这样(XXX是图像)

XXXX
XXXX  I want my text to stay up here
XXXX  and when it wraps or a new line
XXXX  I want the text to stay here
and then move under the image, but with the examples above this happens to me


XXXX
XXXX The text starts here but when it line wraps
XXXX
XXXX
or a new line, it moves down here. and this just
looks terrible. The code above is taken from 
the thread that explains how to get the text
to start where I want it but I can't find any
examples to make it look like the above example.

抱歉,我仍然没有弄清楚如何正确使用这个网站 正确放置代码。我提前道歉,但我正在尝试,我无法弄明白所以我使用了* inplace of<>在标签中。

1 个答案:

答案 0 :(得分:1)

我想你想要喜欢这个

.float-left{
  float:left;
  margin: 0 20px 20px;
}
<p><img src="http://via.placeholder.com/150x150" class="float-left"> The text starts here but when it line wraps or a new line, it moves down here. and this just
looks terrible. The code above is taken from 
the thread that explains how to get the text
to start where I want it but I can't find any
examples to make it look like the above example.</p>