Hi Guys,
this may sound easy, but i have not found any way to center my stop sign in the below code,
I tried playing with paddings, with css margin-left: & margin-right:, with text-align:center and a few more. But it’s not working as expected.
Do you have any further idea?
<!-- Button Manual https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
https://www.w3schools.com/css/css3_buttons.asp
-->
<style>
.blinds_UP_DOWN_control-table {
width: 100%;
height: 100%;
text-align: right;
top:0px;
bottom:0px;
left:0px;
right:0px;
position:absolute
}
.blinds_UP_DOWN_control {
position: relative;
background-color: #CCCCCC;
border: 1;
font-size: 20px;
color: #000000;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.blinds_UP_DOWN_control:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.blinds_UP_DOWN_control:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
<table class="blinds_UP_DOWN_control-table" border="0">
<tr>
<td style="width: 33%;height: 100%">
<button class="blinds_UP_DOWN_control" style="width: 100%;height: 100%" ng-click="sendCmd(config.blinds_level, 'UP') ">▲</button>
</td>
<td style="width: 33%;height: 100%">
<button class="blinds_UP_DOWN_control" style="width: 100%;height: 100%" ng-click="sendCmd(config.blinds_level, 'STOP') "><img src="/static/icon-stop.svg" width="100%"></img><br>{{itemValue(config.blinds_level)}}</br></button>
</td>
<td style="width: 33%;height: 100%">
<button class="blinds_UP_DOWN_control" style="width: 100%;height: 100%" ng-click="sendCmd(config.blinds_level, 'DOWN') ">▼</button>
</td>
</tr>
</table>
Thank you Andreas