vertically centered icons

Author: alirezafarin

README.md

@@ -13,10 +13,17 @@
 1- Set the Preloader color,size and animation speed once in index.js ui.Preloader.setUp("#777777ff",200,200,0.2) <br/>
 2- and then use it every where like below: <ui.Preloader/> ☺
 
+<br>
+<br>
+
 ### Input
 
 This is just like html input tag but it has better control on patterns and it will correct the user's mismatches character
 
+
+<br>
+<br>
+
 ### TagForInput
 
 this component displayes a tag name on top corner of the input element passed to it
@@ -54,6 +61,10 @@ tagBackGround: string ---> the background color of the tag span -- default is wh
 tagColor: string ---> tagName color -- default is black
 <br>
 <br>
+
+<br>
+<br>
+
 ### ItemSlider
 <br>
 this component is a slider for the cards (or divs with your own design) you pass to it.
@@ -83,6 +94,14 @@ id : string ---> this is the identifier that enables navigation button scrolling
 <br>
 rtl : boolean ---> whether the tagName should be on left corner or right -- default is false
 <br>
+color : string ---> color for the navigation buttons -- default is black
+<br>
+fontSize: string ---> font size of the navigation buttons -- default is 20px
+<br>
+top: string ---> the position of the navigation buttons from top of the container 
+
+<br>
+<br>
 
 ## libs
 Pure JS functions and classes<br/>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "saffroncodejs",
-	"version": "1.9.3",
+	"version": "1.9.4",
 	"description": "Package of optimised react components and javascript functions for developers ♫♪",
 	"main": "./lib/SaffronCode.js",
 	"types": "./lib/SaffronCode.d.ts",

src/ui/ItemsSlider.tsx

@@ -146,14 +146,15 @@ export default class ItemsSlider extends Component<ItemSliderProps> {
       position: "relative"
     }
 
-    const top = (this.props.top) ? this.props.top : '39%';
+    const top = (this.props.top) ? { top: this.props.top } :
+      { top: "50%", transform: "translate(0%,-50%)" };
 
     const navButtonsStyle:object = {
       position: "absolute",
       width: "100%",
       display: "flex",
       justifyContent: "space-between",
-      top,
+      ...top,
       left: "0"
     }