Vertically middle align text in a bootstrap column

Question

I need tree cells in tree columns(col-4), with an image, that determines the height of the cell, and vertically middle-aligned text, like this:

This is what I get (CodePen Here):

<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>

Where is the problem ?

score 2 · Accepted Answer · answered Mar 31 '17 at 09:20

Try this. Use display: table; for parent class and display: table-cell; vertical-align: middle; for child elements. This will give you vertical align correctly.

<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>

thanks, is there a way to set the max-height after the image (unknown) height and cut the exceeding of the text? — serge, Mar 31 '17 at 10:31

score 1 · Answer 2 · answered Mar 31 '17 at 09:14

1

The problem is that you are closing the first <a> with a </div> tag mate, so you close the div with the row class too early. =)

answered Mar 31 '17 at 09:14

Ricardo Zorzo

289
1
9

1

yeah I fixed that as well in my answer but that wasn't the issue. – ZombieChowder Mar 31 '17 at 09:17
thanks. That improved the rendering, but not solved the problem ;) – serge Mar 31 '17 at 09:55
@Serge found your issue, look at my updated answer. – ZombieChowder Mar 31 '17 at 10:07

score 0 · Answer 3 · answered Mar 31 '17 at 09:17

0

You can just add following css code :

img {vertical-align: middle;}

It align your a tag in the middle of image.

answered Mar 31 '17 at 09:17

Gurpreet Singh

31
5

thanks, is not the image I need to align, but the text on the right of the image... – serge Mar 31 '17 at 10:26

Vertically middle align text in a bootstrap column

3 Answers3