Bad height element - html

Question

I have a problem with the heigth of the div.divB element in this code:
<div class="divA">
<img src="http://lorempixel.com/1000/130"/>
<div class="divB">
<span>Text text</span>
</div>
</div>
See this jsfiddle.
Why my is div.divB.height != div.divA.height? But his height is 100%.
I want it so that " text text " is in the middle.
EDIT:
Height image is random, because image file is uploading by User. In this example I use 130 but can be 200 or 50.

Answer 1

That is because you are declaring the height of the table to be 100px, which is 30px less than the height of the image. If you update that value to 130px, it should work as intended:
.divB{
display: table;
width: 100%;
height: 130px;
position: absolute;
top: 0px;
left: 0px;
}
See fiddle.
Alternatively, you might want to consider other approaches if your image element has a dynamic, non-static height. You can use (1) the translate by -50% approach, or (2) the flexbox approach.
For the translate by -50% approach, this works by simply forcibly stretching the parent container, .divB, to the size of its wrapping parent, by setting all four cardinal values to 0. After that, we position the inner child by 50% from the top, and then offset it vertically upwards by half of its height—that's when the translate by -50% trick kicks in:
.divB{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
.divB > span{
display: block;
transform: translateY(-50%);
padding-left: 120px;
position: absolute;
top: 50%;
font-size: 1.8rem;
color:white;
}
See alternative solution #1.
For the flexbox approach, we repeat the first step in the first solution—setting all cardinal offsets to 0—and then simply using the flexbox specification and align the inner element to the vertical center by using align-items: center:
.divB {
display: flex;
align-items: center;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
See alternative solution #2.

Answer 2

Firstly, divA is still set to block, so while it may have an image which is only 1000px wide, it will continue being wider than that image, setting the element to display: inline-block will help make sure that its widths are set fine.
Next, you need to set the height of divB to the same as divA. In this case its 130px.
You are also using padding for to centre the text, when you should really be using the text-align: center; ability.
Below is the full example
.divA {
position: relative;
display: inline-block;
overflow: auto;
}
.divB {
display: table;
width: 100%;
height: 130px;
position: absolute;
top: 0px;
left: 0px;
}
.divB > span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 1.8rem;
color: white;
}
<div class="divA">
<img src="http://lorempixel.com/1000/130" />
<div class="divB">
<span>Text text</span>
</div>
</div>