html - 如何使用 Bootstrap 根据屏幕尺寸居中图像

Question

如何使用 Bootstrap 根据屏幕尺寸将个人资料图像居中？

这是我到目前为止所做的:

html:

<div class="col-md-12">
  <div class="col-md-2 col-xs-12">
    <div class="deck">
      <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="list image" width="160">    
    </div>
    <div class="title-users-list-profile"> 
        <img class="comments-author" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_9j6SU0VDO8PQtsal3pvO2Xrp4eu2IbOYQVjLUDtRNQmn6PIBqDw3B4o" alt="image picture"/>
    </div>

  </div>

</div>

CSS:

.deck{
  display: flex;
}
.comments-author {
  border-radius: 50%;
  border: 6px solid #fff;
  margin: 5px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}   
.title-users-list-profile img{
  position: relative;
  width: 50px;
  height: 50px;
  top: -35px;
  left:50px;
  margin-top: 8px;
  margin-bottom: -25px;
}

https://jsfiddle.net/tzc2gdcf/

Answer 1

您可以使用 flexbox 来对齐图像。 查看本指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 并使用 @media 对单个媒体大小的特定规则