制作图片的标记中心

我使用引导程序3，并且想要在图像顶部添加一个图标链接并垂直居中。制作图片的标记中心

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
<div class="col-post"> 
    <div class="post-img"> <a href="#" class="my-icon"></a> <a href="mylink"> 
    <div class="overlay"> <img src="myimage.jpg" alt="#" class="img-responsive"> </div> 
    </a> 
    </div> 
    <!--post-img--> 
    <div class="post-icons"></div> 
</div> 
</div>

我希望类my-icon的链接位于图像的中心。我的图标是绝对定位的，后置img是相对定位的。

任何帮助将不胜感激。

来源

2016-05-14 Jordyn

您需要更改在这种情况下，HTML结构 –

试试这个http://stackoverflow.com/questions/10879955/how-to-align-an-image-dead-center-with-bootstrap – Atula

你尝试了什么？显示一些CSS。 –

-1

这是一些帮助我垂直居中显示图像的代码。它通常比横向居中更棘手。

#ID { 
    Margin:0 auto; 
    Position:absolute; 
    Left:0; 
    Right:0; 
    Top:50%; 
    Transform: translate(0, -50%); 
    Display:block; 
}

来源

2016-05-14 14:08:35 user6334426

Craete演示查看结果。 – Mohammad

我只是用从库中现有.center-block辅助类以及.text-center类中心的每个div的内容。（see documentation for bootstrap 3.x）

我不确定这正是你想要的，但它应该可以帮助你更接近你的结果。

让我知道它是否需要调整。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class="row"> 
    <div class="col-xs-12"> 
    <h2>My approach (simplistic)</h2> 
    <a href="#" class="my-icon"> 
     <img src="http://lorempixel.com/300/300" class="center-block img-responsive img-circle" alt="Responsive image" /> 
    </a> 
    </div> 
</div> 
<hr/> 
<div class="row"> 
    <div class="col-xs-12"> 
    <h2>Your approach (w/ added elements)</h2> 
    <div class="col-post"> 
     <div class="post-img center-block text-center"> 
     <a href="#" class="my-icon">my-icon</a> 
     <a href="mylink"> 
      <div class="overlay"> 
      <img src="http://lorempixel.com/300/300?asdf" alt="#" class="img-responsive center-block"> 
      </div> 
     </a> 
     </div> 
     <!--post-img--> 
     <div class="post-icons center-block text-center">post icons</div> 
    </div> 
    </div> 
</div>

来源

2016-05-18 18:03:44 ochi

Try Flexbox，它是我曾经有过成功的始终定心项目垂直为数不多的途径之一。

对于父容器：显示

显示这定义柔性容器;内联或块取决于给定的值。 >它为所有直接的孩子提供了一个弹性环境。

CSS.container { display: flex; /* or inline-flex */ }

对于孩子：对齐项

对齐项这定义了如何柔性物品沿横轴上的电流线布局的默认行为。将其视为横轴的证明内容版本（垂直于主轴）。

CSS.container { align-items: flex-start | flex-end | center | baseline | stretch;}

来源

2016-05-18 20:49:11 Capo

制作图片的标记中心

回答

相关问题