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

Question

I'm trying to position two paragraphs next to a Font Awesome icon and have them vertically centred too. 我试图将两个段落放置在Font Awesome图标旁边，并使它们也垂直居中。

Using the below I have managed to get what I want but this is not responsive. 使用下面的内容，我设法获得了想要的东西，但这没有反应。 If I start to shrink the screen, the text in the paragraphs becomes too long and then the div wrapping the paragraphs moves onto the next line. 如果我开始缩小屏幕，则段落中的文本会变得太长，然后包裹段落的div将移至下一行。 I would like the paragraph text to wrap whilst still being vertically centred. 我希望将段落文字换行而仍保持垂直居中。

For quickness I have just used the style tags for CSS. 为了快速起见，我只使用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

Replace this code to your 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: calc(100% - 109px);word-wrap: break-word;">
    <p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
    <p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
    </div>

Here is the preview link: https://codepen.io/ziruhel/pen/aVzoPd 这是预览链接： https : //codepen.io/ziruhel/pen/aVzoPd

I update for you avoiding fixed size.. 我为您更新以避免固定大小。

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

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

Answer 2

EDIT based on comment: 根据评论进行编辑：

Float solution Fiddle (text will wrap below icon though) 浮动解决方案小提琴 （文本将环绕在图标下方）

You could use flex for that, note that in your scenario you are using very long text without spacing, which will prevent the browser from correctly wrapping it, added a few spaces to text here and there. 您可以为此使用flex，请注意，在您的方案中，您使用的是非常长的文本而没有空格，这将阻止浏览器正确包装它，并在此处到那里添加一些空格。

I'd suggest re-working your HTML to the following: 我建议您将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>

Then simply add display: flex; 然后只需添加display: flex; to .wrapper via CSS. 通过CSS到.wrapper 。

See working resizable snippet (once on it, re-run for proper displaying) 查看可调整大小的代码段 （一旦运行，请重新运行以正确显示）

Screens below: 屏幕如下：

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