垂直对齐列表组引导程序

时间：2018-04-26 11:43:45

标签： html css twitter-bootstrap

如何对齐bootstrap组中心？

我有代码：

＆＃13;
＆＃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;
＆＃13;
＆＃13;

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

示例：

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

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

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

答案 2 :(得分：0)

<!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>
相关问题
最新问题