圖像到引導區div的中心

所有的圖像應該居中對齊，不論其大小。我已經嘗試使用下面的代碼，但它不適合我。任何幫助，將不勝感激圖像到引導區div的中心

.border-class{ 
 
    border:1px solid #ddd; 
 
    padding:5px; 
 
    min-height:160px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_27_one_finger_click-128.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/images/colorpicker.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
</div>

來源

2016-11-08 Ganesh Putta

*我想所有的圖像是居中對齊垂直和水平*又是爲了什麼，你居然* *要實現一個非常模糊的描述。你試過什麼了？你有什麼樣的例子嗎？ – Roberrrt

您可以使用CSS Flexbox的。只是Flex屬性添加到.border-class

.border-class { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

請參見下面的代碼片段：

.border-class{ 
 
    /* Add these 'flex' properties */ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border:1px solid #ddd; 
 
    padding:5px; 
 
    min-height:160px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_27_one_finger_click-128.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/images/colorpicker.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

希望這有助於！

來源

2016-11-08 10:14:51

使用background-size的cover屬性：

background-image : ... 
background-size : cover; 
background-position : center;

來源

2016-11-08 10:15:15

圖像到引導區div的中心

回答

相關問題