Html 垂直对齐列表组引导_Html_Css_Twitter Bootstrap

Html 垂直对齐列表组引导

html css twitter-bootstrap

Html 垂直对齐列表组引导,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,如何对齐引导程序组中心我有密码： JS-Bin 你的对话迪马你好 19:07 杰克不 20:07 麦当娜英雄联盟 22:04 使用引导实用程序类 JS-Bin 你的对话杰克不 20:07 杰克不 20:07 杰克不 20:07 像这样使用HTML <li class="list-group-item"> <div class="avatar"> <img src="https:

如何对齐引导程序组中心

我有密码：

JS-Bin 你的对话迪马你好 19:07 杰克不 20:07 麦当娜英雄联盟 22:04

使用引导实用程序类

JS-Bin 你的对话杰克不 20:07 杰克不 20:07 杰克不 20:07 像这样使用HTML

<li class="list-group-item">
                <div class="avatar">
                  <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
                </div>
                <div>
                  <div class="user-name">Dima</div>
                  <div class="message float-left">Hello?</div>
                </div>
                <span class="date text-mutted float-right">19:07</span>
              </li>

你想让时间集中在阿凡达的右边吗？您在哪里尝试使用对齐项目中心？不工作：对齐项目中心：它对齐项目中心，不对齐项目中心，请准确地说明您正在努力实现。如果这个或任何答案已经解决了您的问题，请考虑通过点击检查标记和上投票接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做不。请看我得到了什么：但我如何才能传递到底部的消息？请检查您想要您的消息的位置。请再次检查我的HTML代码。将您的用户名和消息div包装到另一个div中。我已经在上面完成了。我在你的小提琴上看不到。请查看：我需要头像做垂直对齐中间

.list-group-item {
  display: flex;
  align-items: center;
}
.date.text-mutted {
  margin-left: auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
    <div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
              Your dialogs
            </div>
            <ul class="list-group list-group-flush text-center">
              <li class="list-group-item">
                <div class="avatar">
                  <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
                </div>
                <div class="user-name">Dima</div>
                <div class="message ">Hello?</div>
                <span class="date text-mutted">19:07</span>
              </li>
              <li class="list-group-item">
                  <div class="avatar">
                    <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
                  </div>
                  <div class="user-name">Jack</div>
                  <div class="message">Nope</div>
                  <span class="date text-mutted">20:07</span>
              </li>
              <li class="list-group-item">
                  <div class="avatar">
                    <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
                  </div>
                  <div class="user-name">Madonna</div>
                  <div class="message">Lol?</div>
                  <span class="date text-mutted">22:04</span>
              </li>
            </ul>
        </div>
    </div>
  </div>
</div>
</body>
</html>