Question

如何对齐bootstrap组中心？

我有代码：

＆＃13;

<!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">
              <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 float-left">Hello?</div>
                <span class="date text-mutted float-right">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 float-left">Nope</div>
                  <span class="date text-mutted float-right">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 float-left">Lol?</div>
                  <span class="date text-mutted float-right">22:04</span>
              </li>
            </ul>
        </div>
    </div>
  </div>
</div>
</body>
</html>

＆＃13;

阿凡达和时间元素我不在中心。我试着做对齐项目中心，但我把所有项目放在水平中心...... 我怎么解决这个问题？

示例：

http://jsbin.com/raqatuyeho/1/edit

Answer 1

使用bootstrap实用程序类。

<!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">
              <li class="list-group-item d-flex align-items-center">
     
                  <div class="avatar">
                    <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
                  </div>
                  <div class="w-100">
                  <div class="user-name">Jack</div>
                  <div class="message bg-light">Nope</div>
                  </div>
                  <span class="date text-mutted ml-auto">20:07</span>
    
                  
              </li>              
              <li class="list-group-item d-flex align-items-center">
     
                  <div class="avatar">
                    <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
                  </div>
                  <div class="w-100">
                  <div class="user-name">Jack</div>
                  <div class="message bg-light">Nope</div>
                  </div>
                  <span class="date text-mutted ml-auto">20:07</span>
    
                  
              </li>  
              <li class="list-group-item d-flex align-items-center">
     
                  <div class="avatar">
                    <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
                  </div>
                  <div class="w-100">
                  <div class="user-name">Jack</div>
                  <div class="message bg-light">Nope</div>
                  </div>
                  <span class="date text-mutted ml-auto">20:07</span>
    
                  
              </li>  
            </ul>
        </div>
    </div>
  </div>
</div>
</body>
</html>

Answer 2

像这样使用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>

还要添加css

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

Answer 3

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

垂直对齐列表组引导程序

3 个答案: