如何在图像右侧中间对齐两行文本？

Question

家伙。我试图通过qazxsw poi和两个qazxsw poi：qazxsw poi实现这一点，但我得到的是：img

我在下面的代码上做错了什么？请帮我！

HTML：

CSS：

Answer 1

0
投票

试试这个

Answer 2

这是我修改过的列表：

在<div class="content-5"> <img src="imagens/joao.png"> <p class="nome">JOÃO SILVA</p> <p class="casamento">Fotógrafo de casamento</p> </div>和.content-5 img { vertical-align: middle; display:inline; margin-left:200px; } .nome { display:inline-block; font-family: "PFAgoraSansPro-Thin"; font-size:22px; color:black; font-weight:bold; padding-left:30px; } .casamento { display:inline; font-family: "open sans"; font-size:16px; color:black; font-weight:normal; }中使用新的保证金和填充值
在<HTML> <HEAD> <style> .content-5 img { vertical-align: middle; display:inline; margin-left:200px; } .nome { display:inline-block; font-family: "PFAgoraSansPro-Thin"; font-size:22px; color:black; font-weight:bold; padding-left:30px; } .casamento { display:block; font-family: "open sans"; font-size:16px; color:black; font-weight:normal; } </style> </HEAD> <BODY> <div class="content-5"> <img src="https://pbs.twimg.com/profile_images/604644048/sign051_400x400.gif"> <p class="nome">JOÃO SILVA</p> <p class="casamento">Fotógrafo de casamento</p> </div> </BODY> </HTML>中使用.content-5 img布局
添加.nome以自动增长或缩小灵活项目

Flexbox

.content-5

.text-wrapper