制作图像的标签中心

Posted 2023-03-06

【中文标题】制作图像的标签中心

【英文标题】：Make a tag center of a image

【发布时间】：2016-09-10 15:09:09

【问题描述】：

我正在使用 bootstrap 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"  class="img-responsive"> </div>
    </a> 
    </div>
  <!--post-img-->
  <div class="post-icons"></div>
</div>
</div>

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

任何帮助将不胜感激。

【问题讨论】：

这种情况下需要改变html结构

试试这个***.com/questions/10879955/…

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

看看here 的一些想法。干杯。

【参考方案1】：

Try Flexbox，这是我成功地将项目垂直居中对齐的少数几种方法之一。

对于父容器：显示

显示 这定义了一个弹性容器；内联或块取决于给定的值。 >它为其所有直接子项启用了弹性上下文。

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

对于孩子：align-items

对齐项目 这定义了弹性项目如何布局的默认行为 沿当前行的交叉轴。把它想象成 交叉轴的 justify-content 版本（垂直于 主轴）。

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

【参考方案2】：

我只是使用了库中现有的.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"  />
    </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"  class="img-responsive center-block">
          </div>
        </a>
      </div>
      <!--post-img-->
      <div class="post-icons center-block text-center">post icons</div>
    </div>
  </div>
</div>

【参考方案3】：

这里有一些代码可以帮助我垂直居中图像。这通常比水平居中要复杂得多。

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

【讨论】：

创建演示以查看结果。