我是HTML CSS的新手。我需要创建查看示例照片：
我使用了代码：
但是我的结果是：
如何移动</>使其居中垂直，attachment标签中的所有内容都会在</>左下照同一张照片？
非常感谢你！
创建视图之前使用html
•
问答
chendy0899 回答：创建视图之前使用html
尝试一下：
.onAppear(perform: { self.sessionChat.loadMsgInChatRoom(chatRoom: chatRoom) } )
尝试：
mutation CreateProductFamily {
createProductFamily(productInput: {
name: "Demo Product"
}){
id
name
}
}
希望它能起作用！
,要将 > 移动到垂直居中位置，请使用以下样式规则：
attachment::before {
content:"</>";
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
此外，您需要添加更多标签：
* {
box-sizing: border-box;
font-family: sans-serif;
}
.wrapper {
position: relative;
border-radius: 10px;
background: #dadada;
padding: 0.8em 4em;
font-size: 1.3em;
}
attachment {
display:block;
}
attachment::before {
content:"</>";
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}<div class="wrapper">
<attachment id="7ffdba46c1b64aba89b5176469c2bd5b">
<p>Code snippet</p>
<p>Text,12 lines</p>
</attachment>
</div>,
在您的代码中添加一些CSS。这会有所帮助。
<!DOCTYPE html>
<html>
<head>
<style>
attachment {
border-radius: 10px;
padding: 8px;
display: flex;
background: #dadada;
line-height: 2; /* New css */
align-items: center; /* New css */
}
attachment::before{
content:"</>";
padding-right: 20px: /* New css */
}
</style>
</head>
<body>
<attachment id="7ffdba46c1b64aba89b5176469c2bd5b">Code snippet </br> Text,12 lines</attachment>
</body>
</html>