Vertical alignment with CSS?

Question

Vertical alignment with CSS?

Asked 6 years, 10 months ago

Viewed 1,400 times

3

I’m trying to display an image and next to it a text. My problem is that this text should be aligned with the bottom of the image, but only appears aligned to the top. I have tried many codes and ended up arriving in this that also does not work:

    <div class="row" >
        <div style="max-width:150px; float:left">
            <img class="img-thumbnail" src=data:image.jpg alt="" />
        </div>
        <div style="display:table-cell; vertical-align:middle; border:1px solid; height:inherit;"><h4>Alguem de Teste</h4></div>
    </div>

Can anyone tell me how to do it?

EDITED:

Renan tried to follow this model that commented:

How to center vertically the content of an element?

It almost worked, but there are some differences that I couldn’t personalize. First I do not know the size of the father div(container) it will have the height of the image in its interior that may vary a little. And unlike the example I have 2 contents that should be next to each other and I do not know how to reconcile this with the "position: Absolute;" used in the example.

@Renan can you help me with the 2 differences I have from this example you indicated? I tried here but I could not and edited the question to point 2 points where I did not know how to solve.

– AlamBique

2017/08/23 at 17:07
vertical-align does not work?

– alexandre9865

2017/08/23 at 17:11
@Alexandremartinsmontebelo by what I read (I don’t know much about html and css) the vertical-Aline only works in table. And one trick to get around this is to put the "display:table-Cell". But it wasn’t working. Obs... I did as Guilherme suggested using "display: inline-block" and gave it right.

– AlamBique

2017/08/23 at 17:16
The vertical-align works for box elements tbm, as Divs for example, and not only for table, but how good it managed to solve the problem.

– alexandre9865

2017/08/23 at 17:22

2 answers

2

Instead of table-cell and float you can use inline-block combined with vertical-align: bottom;, an example:

<div class="row" >
    <div style="max-width:150px; display: inline-block;">
        <img class="img-thumbnail" style="width: 100%" src="https://i.stack.imgur.com/KPI0G.jpg?s=328&g=1" alt="" />
    </div>
    <div style="display: inline-block; vertical-align: bottom; border:1px solid; height:inherit;"><h4>Alguem de Teste</h4></div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Lucas Henrique • **539** points · Answer 1 · 2017-08-23T17:10:44+00:00

Use position: absolute; and bottom: 0; in the text box, and put position: relative; and display: inline-block; in the father, who in this case is .row, follows code:

.row{
    position: relative;
    display: inline-block;
}

.box-image{
    max-width: 150px;
    float: left;
    
    /*para fins de teste, ignore*/
    height: 200px;
    width: 100px;
    background: red;
}

.box-txt{
    display: inline-block;
    border: 1px solid;
    position: absolute;
    bottom: 0;
   
    /*você também precisará definir uma largura para a caixa de texto*/
    width: 113px;
}

<div class="row" >
    <div class="box-image">
        <img class="img-thumbnail" src=data:image.jpg alt="" />
    </div>
    <div class="box-txt"><h4>Alguem de Teste</h4></div>
</div>