Search code examples
htmlcsssplash-screen

CSS: Center the splash screen close button

In my splash screen I'd like to center the 'close' ('X') button on the bottom of the page, and it has to adjust itself to fit any computer or mobile device screen. In the CSS it can be found starting at line 206. I've tried these things:

  1. position: absolute
  2. I tried margins at different sizes or no margin
  3. top: -999em; right: 10px;

Here's my CSS. Here's the whole App.

The close button in the splash screen of this app is placed how I'd like it, besides that it moves in certain browsers. I'm not able to figure out how they did it.: https://willcountygis.maps.arcgis.com/apps/StoryMapCrowdsource/index.html?appid=20ff154f5fbc4c99bc54bd2e6b8cea7e

The most similar question I could find was a post I largely based my CSS off of: Splash Page with Pure CSS and close button

Solution

  • centering of elements in the screen can be done with the following CSS. If you place it insode a parent element, make sure it has a position property in the CSS. You can play with the top and bottom property settings to position it.

    .screenbutton {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: lightblue;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
    <div class="screenbutton"></div>