Center images side by side

Asked

Viewed 1,485 times

0

I would like to center these two images side by side, but on a small screen the bottom is very close to the top image

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

html css

  • Try to use a pandding: auto or margin: auto in the css of div, in class:row, in this case. Depending on the behavior of the images.

  • Akashi, I’m sorry but I don’t know how and where to declare this.

1 answer

1


Face the easy way to solve this is by placing a margin-Botton on the image, so you do not interfere creating classes in the Bootstrap Grid as in . Row or col-

See how it looks in this example:

img {
    width:100%;
    margin-bottom: 30px;
}
<!DOCTYPE html>
<html>
  <head>
    <!-- Latest compiled and minified CSS -->
 <meta charset="utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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%: */

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

  • Decided it was worth it!

  • 1

    Miguel saw that you are starting with CSS/Html so just a note, do not use the style like this: img {margin...} Create a unique class for this occasion and use it when you need it, for example img.margemb {margin...} and then in the image put <img class="margemb"> If you don’t do so all your images will have a margin including those that do not need. Qq doubt speaks there.

  • Okay, thank you hugocsl

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.