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
	
	
	546 Scrap text information after the "View More" button when searching in the Yahoo! News search window

	560 /usr/bin/google-chrome:symbol lookup error:/usr/bin/google-chrome: undefined symbol:gbm_bo_get_modifier

	513 The method of the class of the application that I am creating in Typescript does not work as I expected.

	967 In Java servlet, when SHA-256 sends WW-Authenticate header for digest authentication, the client does not return the result.

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