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

The form inputs within the modal are unresponsive to clicks

jQuery validation for various forms with individual submission buttons

Move the button to the following line and center it. Ensure that the background image remains at full size

Include a custom HTML element on a webpage using Python's Selenium module

The functionality of the Bootstrap carousel is not functioning properly in the Firefox browser

Prevent the event from spreading down to the child elements

:root variables not being recognized in SCSS and Vue3 with Vite

Guide on breaking a th tag as a line in a table using CSS

Issue with Tailwind and MUI integration causing unanticipated error with white buttons in NextJS Project

Is there a way to prevent the contents of my div from overflowing beyond my other div?

How can I convert a background image source into a fluid list item with a display property of inline-block?

If the selected tab matches, collapse it using jQuery

Users report text-shadow not working in Opera browser

Is there a way to modify the hover border effect of a TextField in material-ui?

Unable to trigger JQuery .blur event

Position the div in the center of a container that is 100% width and has floating elements with dynamic widths

Develop fresh JavaScript code using JavaScript

The Evolution of Bulma's Navigation Menu

Coordinate the timing of CSS animation with the loading of the page

Make sure the bootstrap row extends to the full height of the page