我试图将两个段落放在 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>
最佳答案
将此代码替换为您的正文:
<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>
关于css - Font-Awesome 图标旁边有多个段落且垂直居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47004329/