position: How to center an element to which absolute is applied.

Position relative and absolute were used to place the divs on top of the divs However, the div set to absolute moves according to the screen size adjustment. Is there any way to fix it? Help me!~

<style>
.donation-quarter{
  position: relative;
  width: 23%;
  margin-left: 1%;
  margin-right: 1%;
  float: left;
  margin-top:50px;
  margin-bottom:50px;
}

.p_info{
  background-color: #ffffff;
  position: absolute;
  left: 0;
  bottom: 0.75em;
  text-align: center;
  width: 80%;
  margin: auto;
}
</style>
<html>
<div class="donation-quarter">
                     <div id="img_box" style="background-color: #e9e9e9;padding: auto;/* height: 250px;                     */height: auto;width: auto;">
                        <img src="img/test_img.png" alt="a" style="width:100%; height: 300px">
                     </div>
                     <div class="p_info" style="margin: auto;top: 260px;left: 29px;height: auto;/* padding: 20px; */">
                        <p class="p_detail1" style="background-color: #ffffff;margin: 0;padding: 10px;">Remaining quantity: 111</p>
                        <h3 class="p_name" style="background-color: #ffffff;margin: 0;">11</h3>
                        <p class="p_detail2" style="background-color: #ffffff;margin: 0;padding: 10px;">111</p>
                     </div>
                </div>
</html>

This is the code. Implemented only this way

And in div,

I want to fill only the p_info with p_detail1, p_name, and p_detail2 so that only the #ffffff base is filled with color and the rest of the should be implemented? You can't! Please help me. Please~~~

View current page


position
css
css3
transform
					
					

	


		
	

	
		2022-09-22 18:13



			

			
			1 Answers


	
		
Modify the style in the <div class="p_info"> section.
It's as below.
<!-- Before -->
<div class="p_info" style="margin: auto;top: 260px;left: 29px;height: auto;/* padding: 20px; */">
    <p class="p_detail1" style="background-color: #ffffff;margin: 0;padding: 10px;">Remaining quantity: 111</p>
    <h3 class="p_name" style="background-color: #ffffff;margin: 0;">11</h3>
    <p class="p_detail2" style="background-color: #ffffff;margin: 0;padding: 10px;">111</p>
</div>

<!-- After -->
<div class="p_info" style="display: table; margin: auto; top: 320px; left: 50%; transform: translateX(-50%); background-color: white; min-height: 142px;">
    <p class="p_detail1" style="Margin: 0; padding: 10px;"> Remaining quantity: 111</p>
    <h3 class="p_name" style="margin: 0;">11</h3>
    <p class="p_detail2" style="margin: 0; padding: 10px;">111</p>
</div>


		
		
			

				

					
				

				
					2022-09-22 18:13
				
			
		
	
			
			If you have any answers or tips



		

	
		Popular Tags
	
	python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
	


	
		Popular Questions
	
	
	581 Scrap text information after the "View More" button when searching in the Yahoo! News search window

	565 rails db:create error: Could not find mysql2-0.5.4 in any of the sources

	567 Understanding How to Configure Google API Key

	867 When building Fast API+Uvicorn environment with PyInstaller, console=False results in an error

	566 Who developed the "avformat-59.dll" that comes with FFmpeg?