引导按钮

Question

I'm using bootstrap to create a button that should be very big. It has to have a text on the left, a picture in the middle and an arrow on the right side.

This is what it should look like

I've tried everything to put the initial text on the left side, it doesn't work. Does anybody have any experience with this?

This is what my code looks like:

 .framework-title { color: deepskyblue; font-weight: bold; font-size: 120%; vertical-align: middle; } .btn-framework { color: #333; background-color: #fff; border-color: #ccc; width: 100%; margin: auto; } .btn-framework:hover { -webkit-filter: brightness(90%); -moz-filter: brightness(90%); -o-filter: brightness(90%); -ms-filter: brightness(90%); filter: brightness(90%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-framework" data-toggle="collapse" data-target="#framework1" tyle="text-align:left !important; padding-left:6px !important;"> <span class="framework-title text-align:left !important; padding-left:6px !important;">Phase</span> <img src="images/analyze/1_phase.png" width="800px" style="margin-right: 0px;"> <span class="glyphicon glyphicon-menu-right" style="vertical-align: middle;"></span> </button> 

Answer 1

You could float it left and right? not exactly sure what you want :-D

 .framework-title { color: deepskyblue; font-weight: bold; font-size: 120%; vertical-align: middle; float:left; } .btn-framework { color: #333; background-color: #fff; border-color: #ccc; width: 200px; margin: auto; } .glyphicon-menu-right {float:right;} .btn-framework:hover { -webkit-filter: brightness(90%); -moz-filter: brightness(90%); -o-filter: brightness(90%); -ms-filter: brightness(90%); filter: brightness(90%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-framework" data-toggle="collapse" data-target="#framework1" tyle="text-align:left !important; padding-left:6px !important;"> <span class="framework-title text-align:left !important; padding-left:6px !important;">Phase</span> <img src="images/analyze/1_phase.png" width="800px" style="margin-right: 0px;" alt="image1"> <span class="glyphicon glyphicon-menu-right" style="vertical-align: middle;"></span> </button>