Question

我需要树列中的树单元格（col-4），图像确定单元格的高度，垂直中间对齐的文本，如下所示：

这是我得到的（ CodePen Here）：

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<style>   a{display:block;}   </style>
<div class="row">
   <div class="col-xs-4 text-center" style="background:red">
      <img src="http://placehold.it/75">
      <a style="background: yellow">Some text red-yellow</a>        
   </div>
   <div class="col-xs-4 text-center" style="background:lightgreen">
      <img src="http://placehold.it/75">
      <a style="background: gray">some other text long text some other long text lightgreen-gray</a>
   </div>
   <div class="col-xs-4 text-center" style="background:skyblue">
      <img src="http://placehold.it/75">
      <a style="background: violet">this is another long long long text that should be here skyblue-violet</a>
   </div>
</div>

＆＃13;

问题出在哪里？

Answer 1

试试这个。使用display：table;对于父类和显示：table-cell; vertical-align：middle;对于儿童元素。这将使您正确垂直对齐。

＆＃13;

<html>

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        a {
            display: block;
        }
        .customclass {
            display: table;
        }
        .customclass img, .customclass a{
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="col-xs-4 text-center customclass" style="background:red">
            <img src="http://placehold.it/75">
            <a style="background: yellow">Some text red-yellow</a>
        </div>

        <div class="col-xs-4 text-center customclass" style="background:lightgreen">
            <img src="http://placehold.it/75">
            <a style="background: gray">some other text long text some other long text lightgreen-gray</a>
        </div>
        <div class="col-xs-4 text-center customclass" style="background:skyblue">
            <img src="http://placehold.it/75">
            <a style="background: violet">this is another long long long text that should be here skyblue-violet</a>
        </div>
    </div>
</body>

</html>

＆＃13;

Answer 2

问题是您要使用<a>标记配对关闭第一个</div>，因此过早关闭div类。 =）

Answer 3

您只需添加以下css代码：

img {vertical-align: middle;}

它将您的a标记与图片中间对齐。

在引导列

3 个答案: