Question

在我的标题中，我有三个徽标。我需要将这些逻辑居中，它们之间的差距在100 - 140px左右。我不知道该怎么做，所以我通过在150px上设置一个余量来解决它，结果是徽标没有放在移动设备上。

在手机上，它们应该是垂直的而不是水平的。

我实际上认为我可以这样做：

显示：内联; 保证金：0自动;

但这根本就没有做任何事情。有谁知道我怎么解决这个问题，所以他们也适合移动设备？

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

添加：

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

您可能需要在.logo元素上设置宽度，也可能需要`margin：0 auto;'也取决于它的宽度。

有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

直播示例：

.logo {
	display:flex;
	justify-content:center;
	align-items:center;
}

.logo img {
    margin-left:10px;
    margin-right:10px;
}

<div class="logo">
	<img src="http://placekitten.com/200/100" alt="">
	<img src="http://placekitten.com/200/100" alt="">
	<img src="http://placekitten.com/200/100" alt="">
</div>

Answer 2

尝试将 行分为3列 ，并将 图像放在 列中 bootstrap的文本中心 类。 Bootstrap将在移动UI上垂直对齐图像。

在iPad上进行视频

在iPad上垂直

在桌面浏览器上

＆＃13;

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

＆＃13;

内联中心三个图像

2 个答案: