how to make button in the center of this popup

Question

I want to make this button in the center of this area but I don't know what's wrong with my code.

Here's the picture:

Here's my code in html

<div class="popup" id="popup">
    <div class="popup-content">
        <div class="popup-image">
            <img src="images/1.jpg">
        </div>
        <div class="popup-header">
            <h1>Lorem Ipsum</h1>
        </div>
        <div class="popup-text">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati veritatis totam perferendis
                consequuntur, ipsam voluptatibus sequi esse sapiente eos. Impedit.</p>
        </div>
        <a href="#" class="popup-btn">Back to list</a>
    </div>
</div>

Here's my code in css

.popup-btn {
display: block;
text-decoration: none;
width: 30%;
margin-top: 2.5rem;
padding: 1rem;
font-size: 1rem;
text-align: center;
color: #FFFF;
background-color: #3B7197;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;

Can anyone help me to solve this problem please?

Devendra Kushwaha · Answer 1 · 2022-08-18T16:03:44.653

1

I have added a another line margin: 0 auto;

 .popup-btn {
    display: block;
    text-decoration: none;
    width: 30%;
    margin-top: 2.5rem;
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
    color: #FFFF;
    background-color: #3B7197;
    border: none;
    border-radius: 0.4rem;
    transition: 0.2s;
    cursor: pointer;
    letter-spacing: 0.1rem;
    margin: 0 auto;

edited Aug 18 '22 at 16:03

answered Aug 18 '22 at 07:19

Devendra Kushwaha

171
10

score -1 · Answer 2 · answered Aug 18 '22 at 07:20

-1

Add this code to .popup-btn class

position: absolute;
left: 50%;
transform: translateX(-50%);

answered Aug 18 '22 at 07:20

tengizmikhelidze

19
1

score -1 · Answer 3 · answered Aug 18 '22 at 07:39

There are a lots of way to make the button center:

one of the way is to use the <center></center> tag :

<center><a href="#" class="popup-btn">Back to list</a></center

or You can use display flex on your .popup-content class to make all of the element to center:

.popup-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

or You can use transform: translate(-50%, 0%) to set your element start point to center then use margin-left:

.popup-btn {
    transform: translate(-50%, 0%) ;
    margin-left: 50%;
}

(I am sorry my native language is not english)

how to make button in the center of this popup

3 Answers3