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

Asked 2 years ago, Updated 2 years ago, 124 views

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


© 2024 OneMinuteCode. All rights reserved.