css 如何将文本与图像对齐？

ckocjqey 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(154)

我已经在这个问题上停留了一段时间，不太确定这个问题是否超级明显，因为我没有来自前端开发背景。
我试图设计一个模仿youtube live chat设计的东西（构建一个集成youtube live chat API的OBS插件）。页面的JsFiddle可以在这里看到-〉jsfiddle demo
不要介意边框，我只是用它来帮助我可视化我的div的边界，但我这里的问题是我如何让用户名和评论的文本直接与pfp图像对齐。
我试过使用浮点数、flexbox、内联属性等，它们似乎不起作用，我也不确定我是否正确地使用了它们，因为我不是一个前端Web开发人员，我对css的了解只是通过堆栈溢出和一些谷歌搜索。
我的理想结果是尽可能接近这样的目标：

.messageBox {
  position: absolute;
  width: 300px;
  height:  500px;
  border: 1px solid #d1d1d1;
  overflow-y: auto;
}

.messageBox .header {
  position: absolute;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d1d1d1;
}

.messageBox .header p {
  position: absolute;
  margin-left: 15px;
  font-family: 'Roboto', sans-serif;
}

.messageBox .content {
  width: 95%;
  position: absolute;
  top: 50px;
  height: auto;
  border: 1px solid green;
}

.messageBox .content .message {
  margin: 10px;
  border: 1px solid red;
  font-family: 'Roboto', sans-serif;
  font-size: small;
}

.messageBox .content .message .pfp {
  width: 25px;
  border-radius: 500px;
  margin-right: 10px;
}

.messageBox .content .message .text{
  margin-left: 15px;
}

.messageBox .content .message .text span{
  color: #747474;
  margin-right: 5px;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <div class="messageBox">
    <div class="header">
      <p>Live Chat Replay</p>
    </div>
    <div class="content">
      <div class="message">
        <img class="pfp" src="https://yt3.ggpht.com/ytc/AAUvwnjDRW6z60q7Db1fOB8-fHRjz4HcW_d-_sa9Ow=s88-c-k-c0x00ffffff-no-rj"/>
        <p class="text"><span>Michael Collins</span>Hello world, this is a test message</p>
      </div>
    </div>
  </div>
<!-- End your code here -->
</body>
</html>

css

来源：https://stackoverflow.com/questions/66931870/how-do-i-align-text-next-to-the-image

2条答案

按热度按时间

cbeh67ev1#

所以，你可以用浮点、柔体和网格来达到同样的效果。
我刚刚编辑了你的JSFiddle，并使用flex实现了一个解决方案。检查一下here。
你可以加些填充物使盒子看起来更漂亮。

.message { 
  display: flex;
  align-items: center;
}

.profile-pic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

赞(0）回复(0）举报 2023-03-05

hc8w905p2#

请使用伸缩与一些边距的图像和段落

.message {
      display:flex
    }

赞(0）回复(0）举报 2023-03-05

我来回答

css 如何将文本与图像对齐？

2条答案

相关问题

热门标签

最新问答