文章/答案/技术大牛

发布

社区首页 >问答首页 >内联中心三像

问内联中心三像
EN

Stack Overflow用户

提问于 2016-08-25 17:22:55

回答 2查看 44关注 0票数 0

在我的头上我有三个标志。我需要把这些logoes集中起来，在100到140 on之间有一个距离。我不知道如何做到这一点，所以我解决了这个问题，在150便士的保证金，结果是标识没有放在移动设备上。

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

我以为我可以这样做：

显示:内嵌；边距: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; 
}

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-25 17:51:38

尝试将行分隔为3列，并使用引导程序的文本中心类将图像放置在列中。引导将在移动用户界面上垂直对齐图像。

On iPad水平

On iPad垂直

桌面浏览器上的

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

票数 1

Stack Overflow用户

发布于 2016-08-25 17:25:19

添加以下内容：

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

您可能需要在.logo元素上设置一个宽度，也可能需要设置“页边距:0自动；”，这也取决于它的宽度。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39151273

复制

相似问题

问内联中心三像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联中心三像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联中心三像
EN