Implement a dropdown-center and dropdown-start.

[Supermarcel10]

1. Add a dropdown class that centers a dropdown

This can be done by adding the following CSS:

.dropdown.dropdown-center.dropdown-right .dropdown-content,
.dropdown-center.dropdown-left .dropdown-content{
	@apply top-1/2 transform -translate-y-1/2;
}

.dropdown-center.dropdown-bottom .dropdown-content,
.dropdown-center.dropdown-top .dropdown-content {
	@apply left-1/2 transform -translate-x-1/2;
}

NOTE: This CSS code doesn't consider mutual exclusion between dropdown-end.

Example Usage:

<div className="dropdown dropdown-right dropdown-center">
	<div tabIndex={0} role="button" className="btn m-1">Example</div>
	<ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 z-10">
		<li><a>Item 1</a></li>
		<li><a>Item 2</a></li>
		<li><a>Item 3</a></li>
	</ul>
</div>

With the CSS I provided it differenciates dropdown-top, dropdown-left, dropdown-right and dropdown-bottom:

<div className="dropdown dropdown-top dropdown-center">...</div>

2. Add a dropdown class that sets the position of a dropdown to it's start

This is useful when you have multiple dropdowns inside a parent div and want to override the default. I.e. You would be able to have dropdown-center as the default and override it to dropdown-start or dropdown-end.

Example Usage:

<div id="all-of-my-dropdowns" className="dropdown-center">
	<div class="dropdown">...</div>
	<div class="dropdown">...</div>
	<div class="dropdown dropdown-end">...</div>
</div>