Is there a way to center an embedded datepicker inside a <div>?

[kusanageek]

I have something along those lines:

<div class="col-sm-12">

<div class="col-lg-4 col-md-6">

</div>

<div class="col-lg-4 col-md-6">

</div>

<div class="col-lg-4" id="datepickerTool"><div></div></div>

</div>

As you can see, the embedded datepicker is using a col-lg-4 because in the lower widths it is going outside of the div. This way it is below the two other elements.

Problem is: it doesn't go to the center of its available space. A 50% padding-left goes way too far and adjustements do not look quite right as of now. Is there a better way?

[kusanageek]

width:220px; 
margin-left:auto; 
margin-right:auto;

It did the trick and it's a beginner-level hack. I probably shouldn't have asked.

Still, if you know something I don't, I'd be happy to read about it.

[Andrew Rowls]

Spot on, I was going to suggest

#datepickerTool div { margin: 0 auto; }

But you'll of course need to use the separate margin-left/right rules if you don't want to bother the top/bottom margins. The `width` rule shouldn't be necessary.

> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepi...@googlegroups.com.
> To post to this group, send email to bootstrap-...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bootstrap-datepicker/9475b8af-07f8-49f4-841a-8c7a8d1ed197%40googlegroups.com.

[kusanageek]

Strangely, removing the width makes it float to the left. 

Le mardi 7 janvier 2014 08:46:21 UTC+1, eternicode a écrit :

Spot on, I was going to suggest

     #datepickerTool div { margin: 0 auto; }

But you'll of course need to use the separate margin-left/right rules if you don't want to bother the top/bottom margins.  The `width` rule shouldn't be necessary.


On 01/06/2014 10:24 AM, kusanageek wrote:
> |width:220px;
> margin-left:auto;
> margin-right:auto;|
>
> It did the trick and it's a beginner-level hack. I probably shouldn't have asked.
>
> Still, if you know something I don't, I'd be happy to read about it.
>
> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepicker+unsub...@googlegroups.com.

[Andrew Rowls]

http://jsfiddle.net/aF7M8/ (slightly modified from the code we've discussed so far)

Perhaps you have other css causing the left alignment?

On 01/07/2014 10:32 AM, kusanageek wrote:
> Strangely, removing the width makes it float to the left.
>

> Le mardi 7 janvier 2014 08:46:21 UTC+1, eternicode a �crit :

>
> Spot on, I was going to suggest
>
> #datepickerTool div { margin: 0 auto; }
>
> But you'll of course need to use the separate margin-left/right rules if you don't want to bother the top/bottom margins. The `width` rule shouldn't be necessary.
>
>
> On 01/06/2014 10:24 AM, kusanageek wrote:
> > |width:220px;
> > margin-left:auto;
> > margin-right:auto;|
> >
> > It did the trick and it's a beginner-level hack. I probably shouldn't have asked.
> >
> > Still, if you know something I don't, I'd be happy to read about it.
> >
> > --
> > You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.

> > To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepi...@googlegroups.com <javascript:>.
> > To post to this group, send email to bootstrap-...@googlegroups.com <javascript:>.
> > To view this discussion on the web visit https://groups.google.com/d/msgid/bootstrap-datepicker/9475b8af-07f8-49f4-841a-8c7a8d1ed197%40googlegroups.com <https://groups.google.com/d/msgid/bootstrap-datepicker/9475b8af-07f8-49f4-841a-8c7a8d1ed197%40googlegroups.com>.

>
> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepi...@googlegroups.com.

> To post to this group, send email to bootstrap-...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/bootstrap-datepicker/04fdd2fb-7d90-44ea-ad03-115abc4fb626%40googlegroups.com.

[kusanageek]

Adding .datepicker-inline class to the selector like in your jsfiddle fixed it! Thanks.

Le mardi 7 janvier 2014 23:37:31 UTC+1, eternicode a écrit :

http://jsfiddle.net/aF7M8/ (slightly modified from the code we've discussed so far)

Perhaps you have other css causing the left alignment?

On 01/07/2014 10:32 AM, kusanageek wrote:
> Strangely, removing the width makes it float to the left.
>
> Le mardi 7 janvier 2014 08:46:21 UTC+1, eternicode a �crit :
>
>     Spot on, I was going to suggest
>
>           #datepickerTool div { margin: 0 auto; }
>
>     But you'll of course need to use the separate margin-left/right rules if you don't want to bother the top/bottom margins.  The `width` rule shouldn't be necessary.
>
>
>     On 01/06/2014 10:24 AM, kusanageek wrote:
>      > |width:220px;
>      > margin-left:auto;
>      > margin-right:auto;|
>      >
>      > It did the trick and it's a beginner-level hack. I probably shouldn't have asked.
>      >
>      > Still, if you know something I don't, I'd be happy to read about it.
>      >
>      > --
>      > You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.

>      > To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepicker+unsub...@googlegroups.com <javascript:>.

>      > To post to this group, send email to bootstrap-...@googlegroups.com <javascript:>.
>      > To view this discussion on the web visit https://groups.google.com/d/msgid/bootstrap-datepicker/9475b8af-07f8-49f4-841a-8c7a8d1ed197%40googlegroups.com <https://groups.google.com/d/msgid/bootstrap-datepicker/9475b8af-07f8-49f4-841a-8c7a8d1ed197%40googlegroups.com>.
>
> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepicker+unsub...@googlegroups.com.