Question

我有一个bootstrap导航栏。我有3张照片。我想让一个向右拉，一个向左拉，一个向左拉。我得到了左右，无法弄清楚如何将最后一张图像居中。尝试CSS并将其包装在<p>中，但它与其余图像分开。是否有一些CSS / bootstrap / html技巧我不知道？

<div class="nav navbar-inverse navbar-fixed-bottom">
  <div class="container">
  <img class="contactPicture pull-center" src="img/gmailIcon.png">
           <img class="contactPicture pull-left" src="img/githubIcon.png">
      <img class="contactPicture pull-right" src="img/linkedinIcon.png">


  </div>
</div>

Answer 1

假设图像处于相对位置。你应该重新订购你的HTML吗？

所以而不是：

for i in range(100):
     for j in range(100):
          result = getResult(i, j)
          print result  // print to output file
     consolePrint "progress: " + str(i) + "%"  // print to console

你想：

<img class="contactPicture pull-center" src="img/gmailIcon.png">
<img class="contactPicture pull-left" src="img/githubIcon.png">
<img class="contactPicture pull-right" src="img/linkedinIcon.png">

如果所有其他方法都失败了，你可以将它包装成一个可能会或可能不会工作的取决于你的CSS。

Answer 2

我认为没有任何建议方法可以做到这一点，所以你（很可能）必须自己定位。这是一个例子。

请参阅代码段。

.footer-img-center {
  left: 50%;
  position: absolute;
  margin-left: -25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav navbar-inverse navbar-fixed-bottom">
  <div class="container">
    <img class="contactPicture pull-left" src="http://placehold.it/50x50/f00">
    <img class="contactPicture footer-img-center" src="http://placehold.it/50x50/fff">
    <img class="contactPicture pull-right" src="http://placehold.it/50x50/ff0">
  </div>
</div>

Answer 3

由于bootstrap中没有“pull-center”，你可以保持你的标记相同并将以下内容添加到CSS中：

.nav .container {text-align:center;}

http://www.bootply.com/hsZ9HaJJmO

Answer 4

好的伙计们，想出这个。将图像连续放入col中。把麻烦形象作为一个品牌。这是我的HTML

<div class="nav navbar-inverse navbar-fixed-bottom">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <img class="contactPicture pull-left" src="img/githubIcon.png">
      </div>
        <div class="col-md-4">
        <a class="navbar-brand-gmail" href="#"><img class="contactPicture gmail" src="img/gmailIcon.png"></a>
      </div>
      <div class="col-md-4">
        <img class="contactPicture pull-right" src="img/linkedinIcon.png">
      </div>
    </div>    
  </div>
</div>

这是我的自定义CSS，取自http://www.bootply.com/9SOuY3vHlF

.navbar-brand-gmail {
   position: absolute;
width: 100%;
left: 0;
text-align: center;
  padding-top: 0;
margin: auto;}

我唯一改变的是将填充顶部添加到零，因此它与其他图像一致。

试图在我的导航栏中居中图像

4 个答案: