Mads Kristensen Mads Kristensen - 3 months ago 17
CSS Question

inline center three image

In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.

How the logos should look like

On the mobile it looks like this:

Mobile logos

On the mobile they should be vertical instead of horizontal.

I actually thought I could do it like this:

display: inline;
margin: 0 auto;

But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?

<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>


CSS

.logo {
margin: 20px 0 15px 0;

}
.logo img{
margin-left: 160px;
width: 163px;
}

Answer

Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.

On iPad horizotal enter image description here

On iPad vertical enter image description here

On desktop browser enter image description here

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <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 -->
  <style type="text/css">
    .logo {
      margin: 20px 0 15px 0;
    }
    .logo img {
      margin-left: 160px;
      width: 163px;
    }
  </style>
</head>

<body>

  <div class="fullscreen landing parallax">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-md-4 text-center">
            <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
          </div>
          <div class="col-md-4 text-center">
            <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">

          </div>
          <div class="col-md-4 text-center">
            <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>