How to center a div with variable length and absolute position?

Navigation
2

I have a question that is consuming me a lot of time, following:

I need to center the counter of the image below, but it needs to be at the bottom of the screen (with position:absolute ) and div of it has variable size.

Ifmydivhadafixedsize,Icoulduseitquietlymargin:0auto;

Butbesidesbeingvariable,itiswithposition:absolute;andwithbottom:0;,itfollowscompletecode:

#clock{position:absolute;bottom:0;margin:0auto;}

Seehowyou'redoing:

Any suggestions?

    
asked by anonymous 04.04.2015 / 19:23

4 answers

2

You did not indicate your markup to get a solution perfectly suited to your case, but there is a solution without resorting to CSS declarations that might jeopardize the presentation of the page due to the use of older browsers:

The wrapper element will be positioned at the bottom of the page, with a width of 100%.

  • The elements of the clock will be inline-block so that we can align them to the center without losing the ability to format them as intended.

    • Example also in JSFiddle . 

    ul {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
li {
  font-size: 2em;
  display: inline-block;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 10px;
  color: skyblue;
}

/* para a demonstração */
html, body { margin:0; padding:0; font-size: 14px; background-color: black; width:100%; }
ul { margin:0; padding:0; }
li > small { font-size: 0.6em; }
    <ul>
  <li>129<br/><small>dias</small></li>
  <li>09<br/><small>horas</small></li>
  <li>39<br/><small>minutos</small></li>
  <li>11<br/><small>segundos</small></li>
</ul>
        
    05.04.2015 / 00:38
    0

    Variable how? Responsive? You are or should be using a "container" in the entire content to centralize the information. If you are using the container and the site is responsive, set a width value for this container, respecting the breakpoints you want using media queries. Now, if you want the content inside to be centered having 3 or fewer boxes, I suggest you use a little javascript / jquery by dividing 100% by the number of elements and applying the result as the new width of each box. Or if you do not worry about IE8 down, you can read about flex-box CSS3.

        
    04.04.2015 / 19:45
    0

    See if this resolves: 

    #clock{
 position: absolute;
 bottom: 0;
 margin: 0 auto;

 display: inline;
 text-align: center;
 overflow: visible;
}
        
    04.04.2015 / 20:01
    -1

    You can user the transform: translate (-50%, -50%); left: 50%; position: absolute; when it does not have the element size.

    In this link there are several ways to do the centralization: link

        
    13.07.2017 / 18:57
    How to copy SQLITE bank from internal memory to SD card Linux command Can Entity Framework not map a table in MVC?