Question

人。我试图通过img和两个p来实现这一点：但我得到的是这个：

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

HTML：

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

CSS：

.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;
}

Answer 1

试试这个

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

Answer 2

这是我修改过的列表：

在.content-5 img和.nome
在Flexbox

.content-5

添加.text-wrapper以自动增长或缩小灵活项目

https://jsfiddle.net/Lgqjd63u/

.content-5 img {
  // margin-left: 200px;
  margin-left: 10px;
}

.nome {
  display: inline-block;
  font-family: "PFAgoraSansPro-Thin";
  font-size: 22px;
  color: black;
  font-weight: bold;
  // padding-left:30px;
}

.casamento {
  font-family: "open sans";
  font-size: 16px;
  color: black;
  font-weight: normal;
}

/* new css */
.content-5 {
    display: flex;
    align-items: center;
}

.text-wrapper p {
    margin: 0;
}
.text-wrapper {
    margin-left: 5%;
}

<div class="content-5">
  <img src="https://pbs.twimg.com/profile_images/604644048/sign051_400x400.gif">
  <div class="text-wrapper">
  <p class="nome">JOÃO SILVA</p>
  <p class="casamento">Fotógrafo de casamento</p>
  </div>  
</div>

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

2 个答案: