Button Position Keeps Changing Positions - css

Question

I would like my button to display as a block but the button sways to the right at times and I am not sure why
I have tried various styling edits but none seem to work
What is the problem with my code?
<div style="position:relative; overflow:visible">
<div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>
<div style="display:block;margin: 0 auto;">
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
<a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
<i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span ng-bind-html="StoreModel.StoreAddress"></span>
</a>
</button>
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
<i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span style="position:center;">
Phone
<span ng-if="isMobile == true">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
<span ng-if="isMobile == false">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
</span>
<br />
<span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
</button>
<a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}">
<md-button style="display:block;
background-color: dodgerblue;
margin: 0 auto;
margin-bottom:10px;
height:80px;"
onclick="window.location.href='~/Appointment/Index.cshtml'"
class="button">
<span ng-bind-html="Appointment Request"
style="word-wrap: break-word;white-space: normal;">
Appointment Request
</span>
</md-button>
</a>
<button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:auto;white-space: normal;word-wrap: break-word;border: none">
<span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
<br />
<div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
</button>
</div>
</div>
This is what I get at times:
What I want

Answer 1

To adjust the code you provided, I would add these styles to the <a> tag where the button you want to style is:
display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none
This is the final result:
<div style="position:relative; overflow:visible">
<div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>
<div style="display:block;margin: 0 auto;">
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
<a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
<i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span ng-bind-html="StoreModel.StoreAddress"></span>
</a>
</button>
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
<i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span style="position:center;">
Phone
<span ng-if="isMobile == true">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
<span ng-if="isMobile == false">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
</span>
<br />
<span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
</button>
<a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}" style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none">
<md-button style="display:block;
background-color: dodgerblue;
margin: 0 auto;
margin-bottom:10px;
height:80px;"
onclick="window.location.href='~/Appointment/Index.cshtml'"
class="button">
<span ng-bind-html="Appointment Request"
style="word-wrap: break-word;white-space: normal;">
Appointment Request
</span>
</md-button>
</a>
<button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 10px auto;height:auto;white-space: normal;word-wrap: break-word;border: none">
<span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
<br />
<div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
</button>
</div>
</div>
Hope that this is what you were asking for.