This particular challenge posed quite a dilemma. The specific tags utilized are not of utmost importance; rather, the focus lies on the quantity of elements and how they intertwine.
To achieve vertical alignment of text, Flexbox was employed, although its compatibility is somewhat restricted (Chrome, IE10, Opera, Safari, most mobile browsers). It's worth noting that Firefox faced an obstacle due to a bug inhibiting Flexbox functionality when dealing with absolutely positioned elements.
Code Snippet:
<div class="gallery">
<article>
<h1>My image title</h1>
<img src="http://placekitten.com/640/480" alt="A really cute kitten" />
</article>
</div>
CSS Styles:
.gallery {
padding: 0 230px;
text-align: center;
}
article {
display: inline-block;
max-width: 100%;
position: relative;
}
img {
max-width: 100%;
vertical-align: text-bottom;
}
h1 {
position: absolute;
text-align: left;
right: -230px;
top: 0;
bottom: 0;
width: 200px;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
Alternatively, one could introduce an additional element and utilize the table/table-cell display properties for achieving vertical centering.
Markup Example:
<div class="gallery">
<article>
<h1><span>My image title</span></h1>
<img src="http://placekitten.com/640/480" alt="A really cute kitten" />
</article>
</div>
CSS Styling:
.gallery {
padding: 0 230px;
text-align: center;
}
article {
display: inline-block;
max-width: 100%;
position: relative;
}
img {
max-width: 100%;
vertical-align: text-bottom;
}
h1 {
position: absolute;
text-align: left;
right: -230px;
top: 0;
bottom: 0;
width: 200px;
margin: 0;
display: table;
}
h1 span {
display: table-cell;
vertical-align: middle;
}
* Please note that slight discrepancies in padding/positioning may be observed in the demos, while the code provided herein remains accurate.