html - 创建 View 之前使用 html

标签 html css

我是 HTML CSS 的新手。我需要创建 View 示例照片:enter image description here

我使用了代码:

<!DOCTYPE html>
<html>
<head>
<style> 
attachment{
border-radius:10px;
padding:8px;
display:block;
background:#dadada;
}
attachment::before{
content:"</>";
}
</style>
</head>
<body>
<attachment id="7ffdba46c1b64aba89b5176469c2bd5b">Code snippet </br> Text, 12 lines</attachment>
</body>
</html>

但我的结果是:enter image description here

我如何移动 </>垂直居中,所有内容在 attachment 中标签将在左侧点亮 </>同一张照片? 非常感谢!

最佳答案

试试这个:

<!DOCTYPE html>
<html>
<head>
<style> 

attachment{
border-radius: 10px;
padding: 20px;
display: flex;        /* Newly added */
background: #dadada;
align-items: center; /* Newly added */
line-height:2;      /* Newly added */
}
attachment::before{
content:"</>";
padding: 20px;     /* Newly added */
}

</style>
</head>
<body>
<attachment id="7ffdba46c1b64aba89b5176469c2bd5b">
Code snippet </br> Text, 12 lines
</attachment>
</body>
</html>

关于html - 创建 View 之前使用 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58704591/

相关文章:

javascript - 如何获取以逗号分隔的选定复选框 ID,其值为 1

video - 在网页中嵌入视频 (HTML)

php - DataTables 插件不起作用

Javascript 过渡叠加和不透明度

javascript - 如何使用 Parse 密码重置

javascript - 对于 Web Audio 节点,.connect() 是做什么的?

python - Scrapy:从 HTML 脚本中提取 JSON

html - 剩余零的嵌套粘性元素不粘性

html - 从 3 个元素 Bootstrap 输入组,当 textBox 是第一个时

jquery - 结合 2 个不同的计数代码来创建一个特定的结果