在我的标题中，我有三个 Logo 。我需要将这些 Logo 居中，它们之间的边距大约为 100 - 140 像素。我不知道该怎么做，所以我通过在 150px 上放置边距来解决它，结果是 Logo 没有放在移动设备上。
在移动设备上，它们应该是垂直的而不是水平的。
我实际上认为我可以这样做:
显示:内联； 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 上水平
在 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>关于html - 内联中心三图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39151273/