logo标签列表

Twitter Bootstrap单元格中图片的垂直对齐（高度未知）

csstwitter-bootstrap
3

我有一个 Bootstrap 网格系统，并且我想要将一张图片（例如提供的图片大小为 200x100）居中放置在单元格内。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
        </div>
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6">
                <img src="http://placehold.it/350x150">
            </div>
            <div class="col-xs-6 container">
                <img class="img" src="http://placehold.it/200x100">
            </div>
        </div>
    </div>
</body>
</html>

我尝试了很多互联网上提供的技巧，但都没有成功。（顺便说一句，它们中的大多数都明确定义了一个高度）作为证明，我在这里提供其中的一些： 例子1：使用padding-top: 100%的技巧增加了一行，而我不需要。 例子2：表格/表格单元格根本不起作用。
例子3：使用inline-block和垂直对齐的技巧也不起作用。
   <style>
        .container:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        img {
            display: inline-block;
            vertical-align: middle;
        }
    </style>

例子4：使用top、left 50%和translate的绝对定位出现错误。
<style>
        .img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
4个回答
4

我最喜欢的垂直对齐技巧:

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

它使用translateY和top将一个项目夹在高度未知的容器中。这需要IE10+。

在这种情况下它不起作用。 - Julian
3

请尝试以下内容

查看示例，请访问CODEPEN

CSS：

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.row > [class*='col-'] img {
  align-self: center;
}
1
您还需要确保该图像的父级div高度大于图像高度。 

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.row > [class*='col-'] img {
  align-self: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  
</head>
<body>
    <div class="container">
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
        </div>
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6 different-height-1" style="border:1px solid green;">
                <img class="img-responsive" src="http://placehold.it/350x150">
            </div>
            <div class="col-xs-6 different-height-2" style="border:1px solid green;">
              <img class="img-responsive" src="http://placehold.it/200x100">
            </div>
        </div>
    </div>
</body>
</html>

你设置了最小高度，但我不知道最小高度是多少。你的第二张图片在行内没有垂直对齐。 - Julian
我试图使其相对于列居中对齐，但其他答案已经解决了这个问题。我只是尝试并编辑了我的答案。 - Lahar Shah
0

你必须违背 Bootstrap 的样式，但这样它才能正常工作。

.img_container {
  position: relative;
}
.reset_pos {
  position: static !important;
}
.center {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row" style="border:1px solid red;">
      <div class="col-xs-6">
        some text
        <br />some text
        <br />some text
        <br />some text
        <br />
      </div>
      <div class="col-xs-6">
        some text
        <br />some text
        <br />some text
        <br />some text
        <br />
      </div>
    </div>
    <div class="row img_container" style="border:1px solid red;">
      <div class="col-xs-6">
        <img src="http://placehold.it/350x150">
      </div>
      <div class="col-xs-6 container reset_pos">
        <img class="img  center" src="http://placehold.it/200x100">
      </div>
    </div>
  </div>
</body>

</html>

谢谢，但在这种情况下，带有图片的列不具有响应性。 - Julian
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接