个人中心
gpt4 book ai didi

html - 内联中心三图像

转载 作者：太空宇宙 更新时间：2023-11-04 02:14:17 24 4
gpt4 key购买 nike

在我的标题中，我有三个 Logo 。我需要将这些 Logo 居中，它们之间的边距大约为 100 - 140 像素。我不知道该怎么做，所以我通过在 150px 上放置边距来解决它，结果是 Logo 没有放在移动设备上。

How the logos should look like

在移动设备上，它们应该是垂直的而不是水平的。

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

显示:内联； margin : 0 auto ；

但这根本不是在做任何事情。有谁知道我该如何解决这个问题，以便它们也适用于移动设备？ 

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

最佳答案

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

在 iPad 上水平 enter image description here

在 iPad 竖屏上 enter image description here

在桌面浏览器上 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>

关于html - 内联中心三图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39151273/

24 4 0
文章推荐： python - 下载维基百科转储时出现 503 错误
文章推荐： c - 矩阵和 vector 乘法优化算法
文章推荐： node.js - 如何使 Node process.stdout.on 流中的数据全局可访问？
文章推荐： c - 来自编程珍珠的最长重复字符串
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com