Aligning a div vertically in the center of its parent container

Question

Aligning a div vertically in the center of its parent container

I am trying to vertically align a child element within its parent element

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#body {
font-family: sans-serif, arial, 'Roboto';
}
#outer {
width: 280px;
background-color: white;
height: 253px;
background-color: #f0f0f0;
}
.imgbox {
height: 174px;
width: 270px;
overflow: hidden;
display: table;
margin: 0 auto;
background-color: black;
text-align: center;
}
.img_content {
max-height: 174px;
max-width: 270px;
margin: 0 auto; 
vertical-align: middle;
display: table-cell;
}
.titlebox {
max-width: 270px;
text-align: center;
}
.title {
font-weight: 900;
font-size: 14px;
}
</style>
</head>
<body>
<div id="outer">
<div class="imgbox">
<img class="img_content" src="http://lorempixel.com/700/100" alt="test image">
</div>
<div class="titlebox">
<p class="title">Lorem ipsum Lorem</p>
</div>
</div>
</body>
</html>

Can anyone explain why the img_content class doesn't vertically align in the middle of the imgbox class when the image exceeds the width?

javascript html css

Answer 1

Answer №1

Here is the custom CSS code to style image containers:

.container {
   height: 200px;
   width: 300px;
   overflow: hidden;
   margin: 0 auto;
   background-color: #f2f2f2;
   text-align: center;
   position: relative;
 } 

.image {
   max-height: 200px;
   max-width: 300px;
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
 }

Answer 2

Here is the custom CSS code to style image containers:

.container {
   height: 200px;
   width: 300px;
   overflow: hidden;
   margin: 0 auto;
   background-color: #f2f2f2;
   text-align: center;
   position: relative;
 } 

.image {
   max-height: 200px;
   max-width: 300px;
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
 }

Answer 3

Answer №2

Utilize css3 flexbox. The following css code should be included on the parent element.

.parent {
  justify-content: center;
  align-items: center;
  display: flex;
}

#body {
  font-family: sans-serif, arial, 'Roboto';
}
#outer {
  width: 280px;
  background-color: white;
  height: 253px;
  background-color: #f0f0f0;
}
.imgbox {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 174px;
  width: 270px;
  overflow: hidden;
  margin: 0 auto;
  background-color: black;
  text-align: center;
}
.img_content {
  max-height: 174px;
  max-width: 270px;
}
.titlebox {
  max-width: 270px;
  text-align: center;
}
.title {
  font-weight: 900;
  font-size: 14px;
}

<div id="outer">
  <div class="imgbox">
    <img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
  </div>
  <div class="titlebox">
    <p class="title">Lorem ipsum Amet</p>
  </div>
</div>

Answer 4

Utilize css3 flexbox. The following css code should be included on the parent element.

.parent {
  justify-content: center;
  align-items: center;
  display: flex;
}

#body {
  font-family: sans-serif, arial, 'Roboto';
}
#outer {
  width: 280px;
  background-color: white;
  height: 253px;
  background-color: #f0f0f0;
}
.imgbox {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 174px;
  width: 270px;
  overflow: hidden;
  margin: 0 auto;
  background-color: black;
  text-align: center;
}
.img_content {
  max-height: 174px;
  max-width: 270px;
}
.titlebox {
  max-width: 270px;
  text-align: center;
}
.title {
  font-weight: 900;
  font-size: 14px;
}

<div id="outer">
  <div class="imgbox">
    <img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
  </div>
  <div class="titlebox">
    <p class="title">Lorem ipsum Amet</p>
  </div>
</div>

Answer 5

Answer №3

There are multiple ways to achieve this effect. One option is to enclose the img tag within a div with a class called "wrapper". The wrapper div can then be styled like this:

.wrapper {
       vertical-align: middle;
       display: table-cell;
}

You can then remove the display:table-cell and vertical-align:middle properties from the image itself.

If you prefer not to make changes to existing CSS, you can explore another approach in this working fiddle: https://jsfiddle.net/mfkxq728/

Alternatively, you could utilize either flexbox (although browser support may vary) or the traditional relative-absolute positioning technique with a translate-Y property. The latter method may require browser prefixes for consistent performance.

Happy coding!

Answer 6

There are multiple ways to achieve this effect. One option is to enclose the img tag within a div with a class called "wrapper". The wrapper div can then be styled like this:

.wrapper {
       vertical-align: middle;
       display: table-cell;
}

You can then remove the display:table-cell and vertical-align:middle properties from the image itself.

If you prefer not to make changes to existing CSS, you can explore another approach in this working fiddle: https://jsfiddle.net/mfkxq728/

Alternatively, you could utilize either flexbox (although browser support may vary) or the traditional relative-absolute positioning technique with a translate-Y property. The latter method may require browser prefixes for consistent performance.

Happy coding!

Aligning a div vertically in the center of its parent container

Answer №1

Answer №2

Answer №3

Similar questions

When trying to click the button in Navbar.jsx, I encounter an error when attempting to invoke the setShowCart(true) function

Error: Unable to register both views with identical name RNDateTimePicker due to Invariant Violation

Place the division at the bottom of the screen

Update the section tag upon submission using jQuery on a jQuery Mobile HTML page

React and Redux encounter an issue where selecting a Select option only works on the second attempt, not the first

Sending an array of objects in JavaScript to a controller

The image appears to be overlapping within the navigation bar

"Displaying 'Object Object' as a title when hovering over an element

What is the process of caching images when they are loaded through a php script?

Adjust image size with react - personalize styling for react-easy-crop

Keep the final item in an array that shares the same attribute

What is the best way to make a div pull its background image directly from the internet instead of using the cached version?

Receiving a 401 error when making an Axios post request

Is there a way to prevent an item from being selected in a Select component when the first letter of the option is pressed?

The map displayed on google.com appears different from the one featured on our website

What is the best way to center align my horizontal subnav?

Vue.js - I am looking to create dynamic buttons that change color when clicked

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

What is the best way to extract data from an array of objects in a JSON response?

Obtaining the attribute value of a disabled element in an Angular JS application