How to align js clock to center of page? - css

Question

How do I align a javascript countdown box to the center of the page? The url is where the js is located is http://www.freelanceseohelp.com/offer/mobile/index.html
I tried aligning the following but I'm having problems:
.flip-clock-wrapper {
I tried adding the above to
<div class="clock"></div>
Any help fixing this will be appreciated. Thanks.

Answer 1

I'm pretty late to the party here but the following works for me at the time of writing (Version: 0.7.4 Beta). The idea is to wrap it in a container and override some of it's CSS.
HTML
<div class="container">
<div class="flip-clock"></div>
<!-- Flip clock is attached the this element, not .container -->
</div>
CSS
.container {
text-align: center;
}
.flip-clock {
display: inline-block;
width: auto;
}
By default .flip-clock has width: 100% and display: block. By setting width: auto and display: inline-block the item no longer spans the width of it's parent and is able to be centered by adding text-align: center to it's container.

Answer 2

.flip-clock-wrapper {
/* text-align: center; */
/* position: relative; */
/* width: 100%; */
margin: 0 auto;
max-width: 460px;
margin-top: 2em;
}
Remove the Commented CSS in the above CSS Class and add the rest 3 lines in your CSS class to get your Page like Below

Answer 3

through testing, i determined the width of the widget is 460px when considering margin. here is the css to make it happen.
.flip-clock-wrapper{
max-width: 460px;
margin: 3em auto 2em;
}
I also added top margin of 3em and bottom margin of 2em to align it correctly. that page has a ton of problems with the CSS.

Answer 4

Add new div element with specify display: inline-block; to archive this.
<div class="clock flip-clock-wrapper">
<div class="middle"> // Add div element (opening)
....
....
....
</div> // Add div element (closing)
</div>
CSS
.middle{
display:inline-block;
*display:inline;/* IE*/
*zoom:1;/* IE*/
}
Screenshot

Answer 5

Another way:
.flip-clock-wrapper {
display: table; //added
}
.flip-clock-divider {
float: left; // remove
}
.flip-clock-wrapper ul {
float: left; // remove
display: inline-block; // added
}

Answer 6

Add this is your css-
.flip-clock-wrapper{
width:460px;
margin:1em auto;
}
I hope I'll helps you.

Answer 7

Just decrease the width of your clock wrapper & set margin value.
.flip-clock-wrapper{
width: 480px;
margin: 30px auto;
}

Answer 8

Try like this
.flip-clock-wrapper{
max-width:480px;
margin:3em auto;
}

Answer 9

Using the .js file from a CDN I did not wanted to edit it.
I applied those lines to my website main CSS:
.flip-clock-wrapper {
width: inherit !important;
}
.flip-clock {
display: inline-block;
width: auto;
}

Answer 10

<table align="center">
<tr>
<td></td>
<td>
<div class="clock" style="margin:Inherited;"></div>
<div class="message"></div>
<script type="text/javascript">
code!!!
</script>
</td>
<td></td>
</tr>
</table>

Answer 11

Make the .flip-clock-wrapper contain width:auto and display:inline-block. That is:
.flip-clock-wrapper {
text-align: center !important;
position: relative;
width: auto;
margin: 1em;
display: inline-block;
}