Font-Awesome图标旁边的多个段落，并且垂直居中

Question

我试图将两个段落放置在Font Awesome图标旁边，并使它们也垂直居中。

使用下面的内容，我设法获得了想要的东西，但这没有反应。 如果我开始缩小屏幕，则段落中的文本会变得太长，然后包裹段落的div将移至下一行。 我希望将段落文字换行而仍保持垂直居中。

为了快速起见，我只使用CSS的样式标签。

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <i class="fa fa-quote-left fa-4x fa-border" style="display: inline-block; vertical-align:middle;"></i>
    <div style="display: inline-block; vertical-align:middle; width: auto;">
    <p>sdfsdfd fsdfsdfsdfsdfd fdfsdfsdfsdfsd fsdfsddfdf sdfsdfsdf sdfsdfsdsdfd fsdfsdfsdf sdfsdfsddfsdfs</p>
    <p>sdfsdfdf sdfsdfsdfsdfdf dfsdfsdfsdfsdfsdf sddfdfsdfsdfsdfsdfsd fsdsdfd fsd fsd fsdf sdfs dfsddf sdfs</p>
    </div>
</body>
</html>

Answer 1

将此代码替换为您的身体：

 <i class="fa fa-quote-left fa-4x fa-border" style="display: inline-block; vertical-align:middle;"></i>
    <div style="display: inline-block; vertical-align:middle; width: calc(100% - 109px);word-wrap: break-word;">
    <p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
    <p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
    </div>

这是预览链接： https : //codepen.io/ziruhel/pen/aVzoPd

我为您更新以避免固定大小。

<div style="display: table-row;">
        <div style="display: table-cell;vertical-align: middle;"><i class="fa fa-quote-left fa-4x fa-border" style=" "></i></div>
        <div style="display: table-cell; vertical-align:middle; word-break: break-all;">
            <p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
            <p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
        </div>
    </div>

这是更新链接： https : //codepen.io/ziruhel/pen/XzJWdK

Answer 2

根据评论进行编辑：

浮动解决方案小提琴 （文本将环绕在图标下方）

您可以为此使用flex，请注意，在您的方案中，您使用的是非常长的文本而没有空格，这将阻止浏览器正确包装它，并在此处到那里添加一些空格。

我建议您将HTML重新处理为以下内容：

<div class="wrapper">
  <div class="icon">
    <i class="fa fa-quote-left fa-4x fa-border" style=""></i>
  </div>
  <div class="text">
    <p>sdfsdfdfsdfsdfsdfsdfdf dfsdfsdfsdfsdfsdf sddfdfsdfsdf sdfsdfsdfsdsdfdf sdfsdfsdfsdfsdf sddfsdfs</p>
    <p>sdfsdfdfsdfsdfsdfsdfdfd fsdfsdfsdfsd fsdfsddfdfsdfsdfsdfs dfsdfsdsdfdfsdfsdf sdfsdfsdfsddfsdfs</p>
  </div>
</div>

然后只需添加display: flex; 通过CSS到.wrapper 。

查看可调整大小的代码段 （一旦运行，请重新运行以正确显示）

屏幕如下：

Font-Awesome图标旁边的多个段落，并且垂直居中

问题描述

2 个解决方案

解决方案1
0 2017-10-29 19:46:56

解决方案2
0 2017-10-29 21:31:51

Font-Awesome图标旁边的多个段落，并且垂直居中

问题描述

2 个解决方案

解决方案1 0 2017-10-29 19:46:56

解决方案2 0 2017-10-29 21:31:51

解决方案1
0 2017-10-29 19:46:56

解决方案2
0 2017-10-29 21:31:51