Tips for changing the parent div's height following a translateY(-50%) transformation

Currently experiencing an issue with a Bootstrap card. The transform: translateY(-50%); property is being utilized to translate the element on the y-axis. Although the height of the parent div has been set to auto, the challenge arises in ensuring that the height adjusts automatically after the translation.

This is the HTML:

<div class="card layer-1-left-sub">
    <img class="card-img-top profile-icon" src="images/profile-boy.jpg" alt="Card image cap">
    <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>

This is my CSS:

.layer-1-left-sub{
  padding: 3px;
  border: 2px solid #3f51b5;
  border-radius: 5px;
  margin: 0 auto;
  float: none;
  height: auto;
}

.profile-icon{
    bottom: 0;
    right: 0;
    left: 0;
    width: 150px;
    height: 150px;
    transform: translateY(-50%);
    margin: 0 auto;
    float: none;
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
}

Encountering the following issue:

https://i.sstatic.net/ooLGh.png

An extra space exists between the image and paragraph that I aim to eliminate.

htmlcss

Answer №1

Revamped with transform property implementation!

 .layer-1-left-sub{
  padding: 3px;
  border: 2px solid #3f51b5;
  border-radius: 5px;
  margin: 0 auto;
  float: none;
  text-align: center;
  position: relative;
}

.profile-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
}

.card-text {
  margin-top: 100px;
}
  <div class="card layer-1-left-sub" style="margin-top:100px">
    <img class="card-img-top profile-icon" src=" https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg" alt="Card image cap">
    <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>

I resolved your issue by utilizing Display flex and eliminating redundant css properties. By adopting this approach, you will achieve a more streamlined styling without the need for using position absolute

 .layer-1-left-sub{
  padding: 3px;
  border: 2px solid #3f51b5;
  border-radius: 5px;
  margin: 0 auto;
  float: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-icon{
    margin-top: -80px;
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
}
  <div class="card layer-1-left-sub" style="margin-top:100px">
    <img class="card-img-top profile-icon" src=" https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg" alt="Card image cap">
    <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>

Answer №2

Make sure to adjust the profile icon's position to absolute and include padding for the container based on the icon size.

.layer-1-left-sub {
  padding: 3px 3px 3px 78px;
  border: 2px solid #3f51b5;
  border-radius: 5px;
  margin: 0 auto;
  height: auto;
}

.profile-icon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translateY(-50%);
    margin: 0 auto;
    display: block;
    border-radius: 50%;
    border: 2px solid #fff;
}

If there is uncertainty about whether card-text has a top margin, consider adding it or increasing the bottom padding of the container instead.

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

Positioning children within a div element

Howdy! I have a neat little setup with two divs stacked on top of each other, each containing child elements. My goal is to hide the first div and have the second div seamlessly take its place while keeping the child elements in their original position. C ...

css

Activate scroll event when image src changes in Angular using jQuery

Seeking assistance with utilizing jQuery to scroll to a specific thumbnail inside a modal when left/right arrows are pressed. The modal should appear when the user clicks on an image. I've managed to implement scrolling upon clicking a thumbnail, but ...

javascriptjqueryhtmlangularjs

The responsiveness of Bootstrap 5 footer needs improvement

I am currently developing a website using Bootstrap 5, HTML, and CSS. I've encountered an issue where the columns in the footer don't align properly when the screen size is reduced. Surprisingly, the columns line up correctly on mobile-sized and ...

htmlcssresponsive-designfrontendbootstrap-5

Align an element to the center and then align a second element to the right using Tailwind CSS

Here is a visual representation of my goal: the dashed line indicates the center of the container. My objective is to horizontally center one div element and then right-align a second div within the same row, all while keeping both elements centered. htt ...

htmlcsstailwind-css

Is there a way to properly align unordered lists (such as a navigation menu) within a div with a width set at

UPDATE: I found a creative solution to my issue. By adding margin-left and margin-right set to auto, along with fixing the width of the nav menu to 1002px and setting its positioning to relative, I was able to achieve the desired effect. Additionally, I cr ...

htmlcsslisthtml-listsunordered

interactive form fields updating using javascript

Hey there! I'm a beginner in web development and currently facing a challenge. I have a form with 2 fields generated by one drop-down menu. I've managed to generate one field, but struggling to get the other due to my limited knowledge. I just ne ...

javascripthtmlhtml-parsing

The div stops scrolling after the Matrix3d transformation is applied, causing the scrolling functionality to cease

The issue arises when attempting to scroll the #content div, as it seems unresponsive. Oddly enough, scrolling with the scrollbar does work: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

htmlcssthree.jstransformation

The attempt to retrieve data from the PHP file using Ajax was unsuccessful

I'm attempting to showcase the content of a PHP file on my HTML page using AJAX. Within my HTML file, I have included the following AJAX code: AJAX Code in get_ajax.html <form action=""> First name: <input type="text" id="txt1" onblur="sh ...

javascriptphphtmlajax

Created a notification for when the user clicks the back button, but now looking to remove it upon form submission

My survey is lengthy and I don't want users to accidentally lose their data by clicking the back button. Currently, I have an alert that warns them about potential data loss, but the alert also pops up when they submit the form. Is there a way to disa ...

javascriptjqueryhtmlforms

I am facing an issue where my Tailwind classes are not functioning properly when passed through props, but they work seamlessly when I directly link the Tailwind CSS using

//Button.jsx import React from 'react'; const Button = (props) => { let color = props.color || 'blue'; return ( <button className={`px-4 py-2 font-bold text-black bg-${color}-500 rounded-full hover:bg-${color}-700 focus ...

htmlcssreactjstailwind-cssvite

Integrating jQuery class into code snippets

I have implemented a fixed header on scroll by adding the class 'fixed' and it is working fine. When I scroll down, after 50px, the 'fixed' class is added to my header container. However, when I scroll back up, the 'fixed' cla ...

javascriptjqueryhtml

"Troubleshooting the Undefined Object Dilemma

I previously asked a similar question, but I have since made some progress. Currently, I have two JavaScript files for a menu bar and an additional two for another object on the page. This is my code that is currently causing an issue: <html xmlns="h ...

javascriptjqueryhtmlasp.net

Sending arguments from PHP using button formaction in a table row

I am facing an issue while attempting to pass two parameters to the opendirectory.php script. The execution of my opendirectory.php script is failing when I click the open directory button. Any assistance would be highly appreciated. Below is how I have ...

phphtmlclickonce

What is the best way to verify that the normalized CSS is functioning correctly in AngularJS?

How can I verify if the normalized css is functioning correctly in Angular.js after importing normalized.css into the style.css file? When I try to import by using Cntrl + click, it displays a "file not found" error message. The steps I followed to add no ...

cssangularjsstylesdenormalized

Navigation bar links refusing to decrease in size

I am encountering an issue with the navigation bar on my website. When I reduce the size of the browser tab, the text remains the same size while the logo shrinks and eventually disappears. How can I ensure that everything scales down proportionally? Pleas ...

htmlcssimagenavbar

Displaying a div on click is simple with CSS and JQuery, but what if you want it to stay visible even after a second click? By utilizing classes within <li> tags instead of buttons

My current code involves clicking on a menu, which should reveal a list where each item has a corresponding section that slides down and slides back up when clicked. However, only the sliding down functionality is working at the moment. I'm new to jQu ...

jquerycssshow-hide

Numerous overlay triggers

Whenever I try to click on an image to activate the overlay, it seems to only work for one specific id and not for any others. Here is the code snippet: <div id="trigger-overlay"> <div class="portfolio web" data-cat="web"> <div id=" ...

jqueryhtmlcss

Create a seamless typing effect in JavaScript that loops indefinitely

I've managed to tweak this code I stumbled upon to almost perfectly fit my needs, except for one thing - it keeps looping. I just want it to type "zero", delete it, and then type "one" before stopping. I've tried making some adjustments here and ...

javascriptcsstext

creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it. I attempted using display:inline-block as well, but it didn't solve the issue. Here is the HTML: http://jsfiddle ...

csshtml

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

javascriptjqueryhtmlsearch