Achieving proper centering of an image requires the use of absolute positioning and other necessary adjustments

I have a challenge with aligning two div elements, each containing an image and a caption.

My goal is to center the images vertically within their respective divs without stretching or distorting them in any way.

Despite researching and trying various suggestions like the ones found on How TO - Center Elements Vertically and CSS Layout - Horizontal & Vertical Align, as well as seeking answers on Stack Overflow, none of the solutions have worked for me.

It's crucial that these elements are displayed responsively.

For testing purposes, I am using the following images:

.border_slide {
  overflow: hidden;
}
.other_titles
{
  margin-top: 5px;
  height: 120px;
}
.other_titles div
{
  width:49.5%;
  margin-bottom: 5px;

}
.other_titles_cap
{
  position: absolute;
  z-index: 100;
  width:100%;
  background-color: rgba(69,69,69,0.4);
  height: 70px;
  margin-top: 80px;
  transition: all 0.3s ease 0s;
}
/*.other_titles_cap:hover
{
  margin-top: 0;
  height: 150px;
}*/
.title2
{
  height: 150px;
  background-color: #9bfff0;
  /*margin-left: 15px;*/
  float: right;
}
.title2 img
{
  margin-top: 0;
  transition: all 0.4s ease 0s;
}
.title2:hover .other_titles_cap
{
  margin-top: 0;
  height: 150px;
}
.title2:hover img
{
  width: 115% !important;
  opacity: 0.8;
  transform:translate(7%,-10%);
  -ms-transform:translate(7%,-10%);
}

.title3
{
  height: 150px;
  background-color: #ffd5c4;
  float: left;
}
.title3 img
{
  -ms-transform:translate(7%,-10%);
  margin-top: 0;
  transition: all 0.4s ease 0s;
}

.title3:hover .other_titles_cap
{
  margin-top: 0;
  height: 150px;

}
.title3:hover img
{
  width: 115% !important;
  opacity: 0.8;
  transform:translate(7%,-10%);
  -ms-transform:translate(7%,-10%);
}
<div class="other_titles">
  <div class="border_slide title2">
    <div class="other_titles_cap">title of Post2</div>
    <img class="" src="https://i.sstatic.net/k6HuQ.jpg" style="width:100%">
  </div>
  <div class="border_slide title3">
    <div class="other_titles_cap">title of Post3</div>
    <img class="" src="https://i.sstatic.net/90ten.jpg" style="width:100%">
  </div>
</div>

I specifically require this functionality for responsive designs when the width is below 520px.

You can access the test environment here:

jsfiddle

htmlcsscenteringresponsive-images

Answer №1

Here is an example similar to the snippet provided.

*, *:before, *:after{box-sizing: border-box;}
.other_titles{
display: flex;
justify-content: space-between;
flex-flow: wrap;
}
.border_slide {
width: calc(50% - 10px);
margin-bottom: 5px;
overflow: hidden;
position: relative;
height: 150px;
}
.border_slide img{
transition: all 0.4s ease 0s;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
}
.other_titles_cap{
position: absolute;
z-index: 100;
width: 100%;
background-color: rgba(69,69,69,0.5);
height: 70px;
bottom: 0;
left: 0;
transition: all 0.3s ease 0s;
padding: 10px;
font-size: 16px;
color: #fff;
}
.border_slide:hover .other_titles_cap{
margin-top: 0;
height: 150px;
background-color: rgba(0,0,0,0.75);
}
.border_slide:hover img{
width: 115% !important;
opacity: 0.8;
transform: scale(1.2);
}
<div class="other_titles">
<div class="border_slide">
<img src="https://i.sstatic.net/k6HuQ.jpg">
<div class="other_titles_cap">Title of Post2</div>
</div>
<div class="border_slide">
<img src="https://i.sstatic.net/90ten.jpg">
<div class="other_titles_cap">Title of Post3</div>
</div>
</div>

Answer №2

Here is a solution for you

.border_slide {
    overflow: hidden;
}
.other_titles
{
    
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100vh;
    justify-content: space-around;

}
.other_titles div
{
    width:49.5%;
    margin-bottom: 5px;

}
.other_titles_cap
{
    position: absolute;
    z-index: 100;
    width:100%;
    background-color: rgba(69,69,69,0.4);
    height: 70px;
    margin-top: 80px;
    transition: all 0.3s ease 0s;
}
/*.other_titles_cap:hover
{
    margin-top: 0;
    height: 150px;
}*/
.title2
{
    height: 150px;
    background-color: #9bfff0;
    /*margin-left: 15px;*/
    float: right;
}
.title2 img
{
    margin-top: 0;
    transition: all 0.4s ease 0s;
}
.title2:hover .other_titles_cap
{
    margin-top: 0;
    height: 150px;
}
.title2:hover img
{
    width: 115% !important;
    opacity: 0.8;
    transform:translate(7%,-10%);
    -ms-transform:translate(7%,-10%);
}

.title3
{
    height: 150px;
    background-color: #ffd5c4;
    float: left;
}
.title3 img
{
    /* transform: translate(7%,-10%); */
    -ms-transform:translate(7%,-10%);
    margin-top: 0;
    transition: all 0.4s ease 0s;
}

.title3:hover .other_titles_cap
{
    margin-top: 0;
    height: 150px;

}
.title3:hover img
{
    width: 115% !important;
    opacity: 0.8;
    transform:translate(7%,-10%);
    -ms-transform:translate(7%,-10%);
}
<div class="other_titles">
  <div class="border_slide title2">
    <div class="other_titles_cap">title of Post2</div>
    <img class="" src="https://i.sstatic.net/k6HuQ.jpg" style="width:100%">
  </div>
  <div class="border_slide title3">
      <div class="other_titles_cap">title of Post3</div>
      <img class="" src="https://i.sstatic.net/90ten.jpg" style="width:100%">
  </div>
</div>

Here's the jsfiddle link

This solution involves using flex in the CSS.

Take a look at the other_titles class

.other_titles {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100vh;
  justify-content: space-around;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate to a specific section within a table

My table is quite large, with potentially more than 100 rows. To handle this, I've used the Scroll class to give it a fixed height. Within the table, there is a radio button. The issue arises when the table is rendered and, for example, row No. 50 is ...

javascriptjqueryhtmlcssbootstrap-4

How can I make a Material UI element fill the entire remaining width of the Grid?

Is there a way to make the child element take up the remaining width of the grid in Material UI? I am trying to have the "User Name" text field fill up the rest of the space in the grid cell but so far I have not been successful. I have even attempted us ...

cssreactjsmaterial-uigrid

Enable only a single radio button to be selected in HTML

I am facing an issue with my radio buttons where I only want one to be selected at a time. Despite giving them the same name, all four can still be selected simultaneously. <h1>Portion</h1> <input type="radio" name="portion_n ...

html

Using a pug template to render a dynamically generated SVG code

I am attempting to include an SVG in my pug template, but I am encountering issues. I am using r6operators from marcopixel, which provides a function operator.toSVG() that returns the XML string of an SVG. When I try this: p some text #{operator.name} ...

htmlnode.jssvgpug

How to use Javascript to set focus on a dropdown list within a PHP script

Having trouble setting focus on the dropdown list in my PHP page dc-test.php, where there are two dropdown lists that are interdependent. The values for these dropdown lists are fetched from a database table. I am unable to set focus on the first dropdown ...

phpjavascripthtmlfocus

Tips for Optimal Dropdown Menu Placement

The tabs in my menu seem to be refusing to move closer to the left side of the menu. I've tried removing padding elements and adjusting other settings, but there still remains an awkward space between the edge of the menu and the tab text. Additional ...

htmlcss

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

Ways to create a scrollable div with the help of Javascript

I am currently developing a web app on the Tizen platform. Within my HTML5 code, I have a div element with an image set as its background. In certain scenarios, I need to display random text within this div multiple times. The text can vary in size and ma ...

javascripthtmltizentizen-web-app

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

Users are restricted to opening only a maximum of 5 tab panes, even if there are multiple tab buttons available. If the user tries to click on the 6th tab, an alert message will be displayed. function addTab(title, url){ var tabs=$(".tabs"), tab ...

javascriptphpjquerycssbootstrap-4

Using Vue to display a Div inside a TD element of a table does not result in a reactive behavior

I am encountering an issue with a table where the last column contains a div with three options (View, Edit, and Delete). This submenu is initially hidden, but when clicking on the options button in the last column of the table, the array used to control i ...

javascripthtmlvue.jsvuejs2vue-component

Is there a way to transfer the content from a textarea to a DIV in a specific format?

I have a text area and button set up to send the text area value (content) into <div id="rs"></div>, with each separate line of the textarea box being appended to the div as a new element when the Enter button or Line breaks occur. F ...

javascripthtmljquery

Troubleshooting problems with Z-Index div hover overlay on [windows] and Webkit browsers (Safari, Opera, etc)

Note: This issue is specific to Windows Webkit and does not affect Macs I am attempting to create a grid with fixed-size cells containing background images. When hovered over, the background image changes and the cell's height increases, overlaying t ...

htmlcsswindowswebkitoverlay

Adjust the Font Size of Bootstrap 3 across different breakpoints

I am currently using Bootstrap 3 and I have a requirement to adjust the font-size at different breakpoints across my website. My goal is to easily modify the font size in one place and have it automatically apply to all Bootstrap components. The desired b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The evolving impact of the HTML5 <video> element

I've been attempting to find information on this topic, but unfortunately my search has not been very successful. I vaguely recall coming across a tutorial that covered something like this. Does anyone happen to know how to alter the perspective of a ...

jqueryflashhtmlcsscanvas

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

javascriptandroidhtmlmobileviber

One way to integrate social sharing buttons into your Django blog

I am currently using the django_social_share module and I am struggling to understand how to send the sharing URL for a specific blog post on social media. Here is my post_detail.html: <article> <div class="embed-responsive embed-responsive-1 ...

javascriptpythonhtmlcssdjango

Achieve vertical text centering without the need for extra HTML code

Is there a way to vertically center text without using a container element, while still maintaining responsiveness? EDIT: I only have knowledge of the height of the h3 element and nothing else. The content will be displayed below, such as etc</p> ...

htmlcsscentering

Move a Div to be positioned directly underneath another DIV

There are two DIV elements, one with an absolute position in the lower left corner of the main DIV. The second DIV is hidden and only displayed when clicking on a link. I want the second one to appear just below the first one, but because the first div&ap ...

css

Stop the entire page from scrolling in Next JS, while still enabling individual components to scroll

My ultimate goal is to have a fixed, sticky menu bar at the top of my app, followed by a div/component that houses the remaining content and does not scroll itself, while still allowing sub-components the ability to scroll when necessary. I plan to build t ...

htmlcssnext.jstailwind-css

What's the best way to get rid of the one-pixel gap between these elements on high-resolution displays like

http://jsfiddle.net/36ykrp9x/5/ HTML <div class="container"> <button>O</button><button>O</button> </div> CSS .container { width: 100%; background-color: rgb(120, 200, 200); text-align: center; } butt ...

htmlcssretina-displayretina