Ndtyjky

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_kosar{text-align:center}

.fejlec_kosar a{display: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>