Myujth

My problem is, that i cant align the span elements horizontally center or middle in the div, or inside the a element.

What i tryed, but didnt work:

.fejlec_kosartext-align:center
.fejlec_kosar adisplay:block;text-align:center

What am i doing wrong? My code looks like this:

<div class="col-md-2 col-xs-4 fejlec_kosar">
 <a href="<?php echo $host; ?>/kosar" title="Kosár">
 <span class="header_kosar_text"><i class="fa fa-shopping-cart fejlec_kosar_ikon" aria-hidden="true"></i> Kosár</span>
 <span id="header_kosar_text"></span>
 <div class="clearfix"></div>
 </a>
 </div>


 .fejlec_kosar 
 margin-top: 18px;
 -webkit-transition: .3s linear;
 -o-transition: .3s linear;
 transition: .3s linear;
 border: none;
 border-radius: 25px;
 background-color: #fbab35;
 color: #173f62;
 padding: 10px 0;

.fejlec_kosar_ikon 
 color: #173f62;
 margin-right: 10px;
 font-size: 20px;

.header_kosar_text 
 color: #173f62;
 font-size: 16px;
 font-weight: 500;
 float: left;
 line-height: 30px;

#header_kosar_text 
 border-radius: 50%;
 background-color: #d5902b;
 color: #fff;
 font-size: 12px;
 font-weight: bold;
 display: block;
 float: left;
 height: 30px;
 width: 30px;
 text-align: center;
 line-height: 30px;
 margin-left: 10px;

As you read in the comments, yo can achieve this using flexbox, what you need to do is

.fejlec_kosar 
 margin-top: 18px;
 -webkit-transition: .3s linear;
 -o-transition: .3s linear;
 transition: .3s linear;
 border: none;
 border-radius: 25px;
 background-color: #fbab35;
 color: #173f62;
 padding: 10px 0;
 display: flex; //ADDED
 justify-content: center; //ADDED

And that should work, here you have an article that will help you to understand how flexbox work;

you can create same in other way. try below code snippet.

.try-btn
 width: 40%;
 margin-top: 18px;
 -webkit-transition: .3s linear;
 -o-transition: .3s linear;
 transition: .3s linear;
 border: none;
 border-radius: 25px !important;
 background-color: #fbab35;
 color: #173f62;
 padding: 10px 0;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
 <div class="col-md-2 col-xs-4"> 
 <a href="#" class="btn btn-lg btn-default try-btn"><span class="fa fa-shopping-cart"></span> Kosár</a>
 </div>
</div>