Vertical alignment with CSS? [duplicate]

Question

Vertical alignment with CSS? [duplicate]

Navigation

#1 by (2 votes)
#2 by (1 votes)

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've tried a lot of codes and I ended up getting this one 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>

Does anyone know how to do this?

EDIT:

Renantriedtofollowthismodelthatcommented:

How to vertically center the contents of a element?

It almost worked, but there are some differences that I could not customize. First I do not know the size of the parent div (container) it will have the height of the image inside it which may vary slightly. And unlike the example I have 2 contents that should stand side by side and I do not know how to reconcile this with the "position: absolute;" used in the example.

html css

asked by anonymous 23.08.2017 / 18:48

2 answers

1

Use position: absolute; and bottom: 0; in the text box, and put position: relative; and display: inline-block; in parent, which 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>

23.08.2017 / 19:10

I need help to turn this SQL into a LINQ Is web service hosting the same as a site with pages?

score 2 · Accepted Answer

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>