logo标签列表

将标签置于图片中心

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

我希望将类名为my-icon的链接放置在图片中心。我的图标是绝对定位的，而post-img是相对定位的。
任何帮助都将不胜感激。
在这种情况下，您需要更改HTML结构。 - Ismail Farooq
尝试这个：https://dev59.com/KGgv5IYBdhLWcg3wDsnZ - Atula
你尝试了什么？展示一些CSS。 - Bram Vanroy
点击这里获取一些想法。干杯。 - agDev
3个回答
0
我刚刚使用了库中现有的.center-block辅助类以及.text-center类来使每个div的内容居中。 （查看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>
0

尝试使用Flexbox，这是我曾经成功地将项目垂直居中对齐的少数方法之一。

对于父容器：display

display 这定义了一个flex容器；根据给定值为内联或块。它为所有直接子元素启用了flex上下文。

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

对于子元素：align-items

align-items 定义了 flex 元素在当前行沿交叉轴（垂直于主轴）上的默认布局行为。可以将其视为交叉轴上的 justify-content 版本。

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

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

#ID {
    Margin:0 auto;
    Position:absolute;
    Left:0;
    Right:0;
    Top:50%;
    Transform: translate(0, -50%);
    Display:block;
}
创建演示以查看结果。 - Mohammad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接