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

Ways to modify color while user moves the screen

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

HTTP request form

A mesmerizing Fullscreen CSS Slideshow that creates a stunning double fade in/out effect for overlaid elements on background slide elements

Reverse the order of jQuery toggle animations

How can I arrange multiple images within a div to create a circular view?

Whenever I try to include something within the `componentWillUnmount` function,

Graphic descending within container

Gensim's Word2Vec is throwing an error: ValueError - Section header required before line #0

What is the best way to vertically align my image for perfect centering?

How can I show the content of a variable in Next.js without displaying any HTML tags?

Magnific Popup displaying only the initial item

Ways to display dynamic content within a div using Bootstrap's vertical tab through a click event in PHP

What is the method for identifying the selected radio button that has been dynamically generated after clicking the submit button?

Is there a way to control the quantity of items being displayed in my ng-repeat directive?

embed a hyperlink onto a live video at a designated moment within an HTML document

Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

Using CSS to Showcase the Art Gallery Page

Incorporate Vimeo video with full-width display

CSS causing black bars to appear when image is moved