What is the best way to align and adjust the position?

I'm attempting to attach a button to a page. I may not be an expert, but here's what I have so far:

body {
    width:100%;
    height:100%;
    background:#181516;
    overflow:hidden;
    position:absolute;
}

.bg {    
    background:url(../images/entrance.jpg) no-repeat center center ; 
    height:100%;
    z-index:1;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

And now for the buttons;

.door {
    display:inline-block;
    width:170px;
    margin-top:22%;
}

However, on smaller or larger screens, the button ends up in random places :D

I need it to be fixed within a square. The background picture is of a small door, and the button should be inside that door... Margin or padding in pixels or percentage always remain constant. Can anyone assist me with this?

cssbuttoncenter

Answer №1

If my understanding is correct, you are looking to keep a div centered on the screen at all times.

The technique I typically use for this involves positioning the div absolutely 50% from the top and left of the screen. By setting the top-left corner of the div as the center point, I then adjust by applying negative margin equal to half of the div's size to reposition it back to the true center.

Essentially, the following CSS code accomplishes this:

.door{ position: absolute;
top:50%;
left:50%;
width:170px;
height:200px;
margin-left:-85px;
margin-top:-100px;
background-color:#fff;
}

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

Aligning the center of an unordered list for 2 lines

I'm struggling to center align my menu that spans 2 lines. I'm currently using ul li and I'm not sure if this is the best approach. I've tried various solutions from Stack Overflow, but nothing seems to be working :( I want the menu t ...

htmlcss

Type content in HTML5

Can you help me with a simple question? I am currently working on building my portfolio using html https://i.stack.imgur.com/rxYRS.png I want to be able to click on an image and add the description of my choice. Right now, it is showing something else: ...

csshtmlproject

What is the best way to ensure the search box remains fixed in the top navigation bar while maintaining a fluid and responsive design?

I've been struggling as a novice programmer, and even with the help of more experienced programmers, we haven't been able to figure it out. I'm trying to integrate a search box into the top navigation that adjusts responsively to different ...

javascriptjqueryhtmlcsswordpress

The Reliability of Using CSS Pixel Font Sizes

Imagine I need to display two capital 'T's, each exactly one inch tall. One 'T' appears on a Macbook Pro with Retina Display (220 DPI, CSS pixel ratio 2), and the other on an iPhone 4S (326 DPI, CSS pixel ratio 2). To achieve this, I se ...

htmlcssfontsmedia-queriesfont-size

Tips for maintaining color on <a> tags even after they have been clicked

My webpage has 3 <a> tag links to 3 different pages. I have set the hover state color to red, and now I want the background-color of the clicked page to remain as it was in the hover state. How can I achieve this? <html lang="en"> < ...

htmlcss

Retrieve the array of strings from the current activity and pass the chosen item to a different activity on an Android

Hey there! Today I have a query regarding string arrays in Android development. I have created an activity with two buttons, and in my strings.xml file, I have defined a string array with two items. What I want to achieve is to display each item from the ...

androidarraysbutton

Ensure the div remains fixed in its position regardless of the page's height

I am seeking assistance with making two divs of equal height on my website. The left div contains dynamic content that may expand vertically with various inner divs. Meanwhile, the right div has a single inner div that should remain visible at the top ev ...

htmlcssbootstrap-4

Issue with dropdown list removeClass function

I am encountering an issue with the Jquery dropdown list click function. The addClass method is working properly, but the removeClass method is not functioning as expected. When I click on the dropdown list, it does not hide. Here is a live demo: http://j ...

javascriptjqueryhtmlcss

What is the best way to add border-radius to an image while incorporating padding?

I am facing an issue with images that have white padding at the top and bottom. Please refer to the attached image. Whenever I try to apply the border-radius property to these images, the edges appear distorted. Is there a way to resolve this problem wit ...

htmlcss

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

javascriptphpjqueryhtmlcss

Display a close button for every individual item and use JavaScript to conceal the current item

I have a list that contains input fields along with delete link elements. I want to display the delete link element when the user hovers over the respective input field. Additionally, clicking on the close button (X) should hide the entire list item (li) f ...

javascripthtmlcsseventsdom

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Is it possible to achieve the same functionality as :first-child by employing :nth-of-type without a selector?

Currently tackling a console warning related to MUI5/emotion (I believe) I have noticed that the pseudo class ":first-child" might pose potential risks during server-side rendering. It may be worth considering replacing it with ":first-of-type". I wonder ...

cssmaterial-uiemotion

Steps for arranging text in a dropdown list option

How can I format 3 words in a dropdownlist option so they are aligned properly? eg. <option value="1">ABCDE - ALPHA</option <option value="2">1234 - NUMERIC</option> <option value="3">ABC123 - ALPHANUMERIC</option> I woul ...

cssalignment

Internet Explorer displaying incorrect shadow effects (paper curl) with CSS

I am attempting to achieve a page curl effect similar to this one: https://i.stack.imgur.com/grS7p.png I have followed the example provided here: http://codepen.io/anon/pen/fpjoa When I create new PHP and CSS files and copy-paste the code from the afore ...

htmlwordpresscssinternet-explorer

What is the best way to create a function that automatically resumes audio playback 3 seconds after the pause button is clicked?

I am looking to develop a basic webpage with an autoplay audio feature. The page would include a "pause" and "play" button. I aim to implement a function where clicking the "pause" button would stop the audio, but after 3 seconds, it would automatically re ...

javascriptjqueryhtmlcss

What is the best way to implement a partial color filter on an image using CSS?

Looking to give our business website a fresh update, but struggling with adding a filter to the images. Our graphics designer created a mock-up for us, but I'm not sure how to implement this feature. Any help would be greatly appreciated! ...

htmlcsstwitter-bootstrapfilterbootstrap-5

What could be causing the absence of a background image in CSS?

When I try to view my local desktop file, the CSS background image isn't showing up. Here's the code I'm using: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" text="type/css" href="dis ...

htmlcss

Adjust the hue as you scroll

I've been searching for a solution to this issue, but I haven't been able to make it work. My goal is to have the page header change from a transparent background to a red background as the user starts scrolling down the page. $(window).on("s ...

javascripthtmlcss

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra ...

javascripthtmljquerycsstwitter-bootstrap