Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

Question

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods.

Here's a visual representation of what I'm aiming for:

I want the text to align at the top-left corner of the container, while the image should position itself in the center of any remaining space after text wrapping (if applicable).

For a demonstration, check out this demo.

Currently, I am utilizing 'flexbox' and 'margin: 0 auto' to achieve the desired centered layout. However, when working with a lengthy image, using 'position: absolute' on the 'h2' element results in an unfavorable appearance.

Is there a way to employ some flexbox wizardry that takes into consideration the height of the dynamically loaded 'h2' element and centers the image within the available free space?

Here are the constraints to keep in mind:

The parent container must maintain dimensions of 200px by 200px.
The image cannot be distorted or stretched.

html css flexbox

Answer 1

Answer №1

I managed to discover my own resolution by merging @Claudio's concept of a table with some clever use of position absolute.

Take a look at the demonstration showcasing both tall and wide images: DEMO

HTML:

<div class="main-box">
  <table>
    <tr>
        <td class="box-title">
            <h2>
                My title here. :) add some more text
            </h2>
        </td>
    </tr>
    <tr>
        <td class="box-img">
            <img src="//i.imgur.com/NOzWHFF.png" alt="Google">
        </td>
    </tr>
  </table>
</div>
<div class="main-box">
  <table>
    <tr>
        <td class="box-title">
            <h2>
                My title here. :) add some more text
            </h2>
        </td>
    </tr>
    <tr>
        <td class="box-img">
            <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="Google">
        </td>
    </tr>
  </table>
</div>

CSS:

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.main-box{
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    background-color: #FFF;
    position: relative;
}
.main-box table{
    width: 100%;
    height: 100%;
    border-spacing:0;
}
.main-box .box-title{
    background-color: rgba(0, 0, 0, 0.1);
    height: 1px;
}
.main-box .box-title h2{
    margin: 0;
    padding: 5px;
    font-family: Helvetica, Arial, sans-serif;
}
.main-box .box-img{
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    position: relative;
}
.main-box .box-img img{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Answer 2

I managed to discover my own resolution by merging @Claudio's concept of a table with some clever use of position absolute.

Take a look at the demonstration showcasing both tall and wide images: DEMO

HTML:

<div class="main-box">
  <table>
    <tr>
        <td class="box-title">
            <h2>
                My title here. :) add some more text
            </h2>
        </td>
    </tr>
    <tr>
        <td class="box-img">
            <img src="//i.imgur.com/NOzWHFF.png" alt="Google">
        </td>
    </tr>
  </table>
</div>
<div class="main-box">
  <table>
    <tr>
        <td class="box-title">
            <h2>
                My title here. :) add some more text
            </h2>
        </td>
    </tr>
    <tr>
        <td class="box-img">
            <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="Google">
        </td>
    </tr>
  </table>
</div>

CSS:

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.main-box{
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    background-color: #FFF;
    position: relative;
}
.main-box table{
    width: 100%;
    height: 100%;
    border-spacing:0;
}
.main-box .box-title{
    background-color: rgba(0, 0, 0, 0.1);
    height: 1px;
}
.main-box .box-title h2{
    margin: 0;
    padding: 5px;
    font-family: Helvetica, Arial, sans-serif;
}
.main-box .box-img{
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    position: relative;
}
.main-box .box-img img{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Answer 3

Answer №2

Nothing is impossible, everything is possible! :)

After a lot of effort, thinking, and testing, I finally found a solution to make something work using only HTML and CSS. It may not be the ideal way, but it gets the job done.

The structure is pretty simple. We start with a main div with dimensions set to 200px X 200px. Inside this div, we have a table with two rows - one for the title and the other for a beautiful img.

To style the structure, we remove border-spacing, adjust margins, and apply height: 1px; to the first row of the table (the title row) as a trick.

Why use height: 1px;? By setting the height to 1px, the table row will only take up the necessary height based on its content. This allows the second row (image row) to occupy the remaining space, which can then be centered using vertical-align: middle; and text-align: center;.

If you want to see the code in action, here's a link to the JSFiddle:

https://jsfiddle.net/u61y62r8/

I hope this explanation helps! :)

Answer 4

Nothing is impossible, everything is possible! :)

After a lot of effort, thinking, and testing, I finally found a solution to make something work using only HTML and CSS. It may not be the ideal way, but it gets the job done.

The structure is pretty simple. We start with a main div with dimensions set to 200px X 200px. Inside this div, we have a table with two rows - one for the title and the other for a beautiful img.

To style the structure, we remove border-spacing, adjust margins, and apply height: 1px; to the first row of the table (the title row) as a trick.

Why use height: 1px;? By setting the height to 1px, the table row will only take up the necessary height based on its content. This allows the second row (image row) to occupy the remaining space, which can then be centered using vertical-align: middle; and text-align: center;.

If you want to see the code in action, here's a link to the JSFiddle:

https://jsfiddle.net/u61y62r8/

I hope this explanation helps! :)

Answer 5

Answer №3

That should get the job done.

<div class="container">
  <div class="inner">
    <h2>Here Comes a Title</h2>
  </div>

  <div class="inner-2">
    <img src="https://example.com/image.jpg">
  </div> 
</div>

CSS:

.inner { 
    width: 100%;
    height: 50px;
}

.inner-2 {
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.img {
    max-width: 100%;
    max-height: 100%;
}

Answer 6

That should get the job done.

<div class="container">
  <div class="inner">
    <h2>Here Comes a Title</h2>
  </div>

  <div class="inner-2">
    <img src="https://example.com/image.jpg">
  </div> 
</div>

CSS:

.inner { 
    width: 100%;
    height: 50px;
}

.inner-2 {
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.img {
    max-width: 100%;
    max-height: 100%;
}

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

Answer №1

Answer №2

Answer №3

Similar questions

The margins are misaligned on a tablet-sized device due to an issue with the media

Link functioning properly for one item but failing for another

Blur effect on backdrop-filter causing shadowy inset borders (specific to Chrome and Windows)

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

Tips for positioning a 404 message at the center of a webpage

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Challenges with loading content on the initial page load using the HTML5

Is the height of the element determined by the parent rather than the content?

Effortlessly browse through directory with the seamless integration of AngularJS or

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

After the initial iteration, the .length function ceases to function properly when

Boost website performance with Google Page Speed by optimizing CSS above the fold using this innovative Bootstrap Template Plugin

Utilizing Angularjs for dynamic data binding in HTML attributes and style declarations

Display issue with ul and li elements in Safari browser causing menu to appear incorrectly

Converting a text area into a file and saving it as a draft in the cloud with the

Changing the border color of a Material UI textbox is overriding the default style

Issues with CSS3 Animation failing to trigger upon hovering over links

ajaxform is not providing the correct response

The list countdown for loop only appears in the initial iteration

Script to pop up cancel alert box