将文本移动到图像旁边的段落顶部/中心答案

【问题标题】：Moving text to top of paragraph/center next to image将文本移动到图像旁边的段落顶部/中心
【发布时间】：2015-06-23 17:07:59
【问题描述】：

我有一张图片，我想在图片右侧添加它的标题和基本描述。我尝试使用位置：相对，绝对。内边距和边距：0px。

链接是：URL

游戏“石头剪刀布”和“米吉”，游戏标题应该在图片的右上方，然后我会在下面添加游戏描述。

谢谢！

【问题讨论】：

标签： html css image position css-position

【解决方案1】：

您好，据我了解，您正在尝试以下类似的操作 https://jsfiddle.net/up1v5j0z/28/

<ul>
    <li><div class="content"><img src="http://i.stack.imgur.com/FZVih.jpg?s=328&g=1" height="200px";><h4>Roshan Padole </h4><p>Senior Software Engineer and DigitalMarketing Experts</br>Management of the manpower with effective positive results. </p></div><br style="clear:both"></li>
</ul>

 .content img {float:left}


[https://jsfiddle.net/up1v5j0z/28/][1]

希望对你有帮助

【讨论】：

【解决方案2】：

在您的页面上播放项目而不必弄乱特定的边距和填充（在繁忙的页面上可能会变得混乱）的一种简单方法是选择您的位置（相对、绝对等），然后使用左、右、和 top 在页面上移动它。

例如

.exampleClass {
position: relative;
left: 20px;
top: 5px;
}

玩弄数字和位置类型，直到您对它们如何影响项目有很好的理解，并且您应该可以毫无问题地调整页面上对象的位置。

【讨论】：

【解决方案3】：

<a href="Games/RPS.html"><img src="Games/RPS.jpg" width="15%" height="15%" alt="Rock, Paper, Scissors"></a>

先拿这两个标签

 <span id="gameTitle">Rock, Paper, Scissors, Shoot</span>

将这些位置替换为两个标签！

<span id="gameTitle" style=" float: left;">Rock, Paper, Scissors, Shoot</span>

将跨度设置为style="float: left"; 在<a href.... 和<span id=.... 之间添加<br/>

您的输出将是 http://myslambook.pe.hu/demo.png

【讨论】：