Gostaria de centralizar estas duas imagens lado a lado, mas em tela pequena a de baixo fica muito junta da imagem de cima
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
/*This stylesheet sets the width of all images to 100%: */
img {
width:100%;
}
</style>
</head>
<body>
</br>
</br>
<div align="center" class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"> <p>Moodle</p> <a href="/moodle"> <img src="http://educar.esy.es/img/if_Quiz-Games_190314.png" alt="Moodle" style="width:128px;height:128px;"></a> </div>
<div class="col-md-3"> <p>Relatórios</p> <a href="/moodle"> <img src="http://educar.esy.es/img/if_report_56294.png" alt="Relatórios" style="width:128px;height:128px;"></a> </div>
<div class="col-md-3"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
pandding: auto
oumargin: auto
no css dadiv
, naclass:row
, nesse caso. Dependendo do comportamento das imagens.