Poor height parameter

Question

Poor height parameter

I am encountering an issue with the height of the div.divB element in this code snippet:

<div class="divA">
    <img src="http://lorempixel.com/1000/130"/>
    <div class="divB">
        <span>Text text</span>
    </div>
</div>

You can view the code on this jsfiddle link.

Why is the height of div.divB not equal to the height of div.divA even though its height is set to 100%? I need to ensure that "text text" appears centered vertically.

EDIT:
The image height is random as it is uploaded by the user. In this example, I have used a height of 130, but it could be any other value like 200 or 50.

html css

Answer 1

Answer №1

The reason for the issue is that you have specified the height of the table to be 100px, which is shorter than the height of the image. To resolve this, simply update the height value to 130px:

.divB{
    display: table;
    width: 100%;
    height: 130px;
    position: absolute;
    top: 0px;
    left: 0px;
}

View the demo here.

If your image element has a dynamic height, consider using the translate by -50% method or the flexbox approach instead:

In the translate by -50% method, stretch the parent container .divB to match its wrapping parent and position the child element at 50% from the top, then offset it by half its height, achieving the desired result:

.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;
}

Check out alternative solution #1.

Alternatively, you can use the flexbox approach by setting all cardinal offsets to 0 and aligning the inner element to the vertical center with 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

The reason for the issue is that you have specified the height of the table to be 100px, which is shorter than the height of the image. To resolve this, simply update the height value to 130px:

.divB{
    display: table;
    width: 100%;
    height: 130px;
    position: absolute;
    top: 0px;
    left: 0px;
}

View the demo here.

If your image element has a dynamic height, consider using the translate by -50% method or the flexbox approach instead:

In the translate by -50% method, stretch the parent container .divB to match its wrapping parent and position the child element at 50% from the top, then offset it by half its height, achieving the desired result:

.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;
}

Check out alternative solution #1.

Alternatively, you can use the flexbox approach by setting all cardinal offsets to 0 and aligning the inner element to the vertical center with align-items: center:

.divB {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

See alternative solution #2.

Answer 3

Answer №2

To begin, ensure that divA is styled as an inline-block rather than a block element to prevent it from extending beyond the width of its contained image. This can be achieved by setting display: inline-block.

Additionally, set the height of divB equal to that of divA, which in this case is 130px.

Instead of using padding for centering text, consider utilizing text-align: center; for a more appropriate approach.

Here is a comprehensive 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>

Answer 4

To begin, ensure that divA is styled as an inline-block rather than a block element to prevent it from extending beyond the width of its contained image. This can be achieved by setting display: inline-block.

Additionally, set the height of divB equal to that of divA, which in this case is 130px.

Instead of using padding for centering text, consider utilizing text-align: center; for a more appropriate approach.

Here is a comprehensive 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>

Poor height parameter

Answer №1

Answer №2

Similar questions

How can CSS be used to make an element completely move off the visible screen?

Guide on accessing the text content within a div element in HTML by triggering a button click

"Utilize CSS Flexbox to create a layout with set width and uniform

Turn off the ability to view the content of .css and .js files within the browser

Guide on creating 2 select inputs with distinct elements?

The shade of gray on Google Maps is distinctive

How to customize a disabled paper-input element in Polymer 1.0?

The items are misaligned in a horizontal position

Creating dynamic animations by shifting the hue of an image on a canvas

Can divs be arranged in a similar fashion as images?

At what point is the rendering process of ng-switch completed?

When incorporating conditional statements into your code, make sure to utilize the tags <script> along with

Populate the browser screen with a series of unpredictable numbers

Concealing my menu with overflow-x: hidden on the body is not an option

Choosing an HTML element based on its specific class is a breeze with these simple steps

Utilizing the optimal method for aligning text to either the right or left side

Exploring new classes with jQuery's .not() and :not()?

Determine if a file input is linked in React.js Material UI

Assistance needed with dynamically resizing a background image

What is the proper way to apply a background color to the entire body using CSS?