JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<div ng-app="MyApp" class="app">
    <div ng-controller="MainController" class="main-ctner">
        <div centery="button">
            <div >
                <button ng-repeat="btn in btns" class="btn">{{btn.name}}</button>
            </div>
        </div>
    </div>
</div>

CSS

.app{
    width: 100%;
    border: 1px solid #ccc;
}
.main-ctner{
    background-color: #ccc;
    width: 100%;
}

.btn{
    width:auto;
    padding: 5px 10px;
    margin-top:10px;
}

JavaScript

var myApp = angular.module("MyApp", []);
myApp.controller("MainController", function($scope){
    $scope.btns = [
        { name: "ab"},
        { name: "abc"},
        { name: "bdefg"},
        { name: "absadf"},
        { name: "abba"},
        { name: "abwerwer"},
        { name: "abadsfasdf"},
        { name: "absadf"},
        { name: "abadfadasdf"},
        { name: "absadfasdfasf"},
    ];
});
myApp.directive("centery", function(){
    function linkFunc(scope, element, attrs){
        var type = attrs["centery"];
        var eles = element.find("button");
        
    }
    return {
        link: linkFunc 
    }
});