How Can I align Text In Center-CodePudding

I am trying to create a Link with glyphicon and I want my Icon and text to aligned in center. I tried with padding and marging both but it moves both the icon and text and I want to move text only. This is my code

.quick-links{
    margin-left: 15px;  
    line-height: 2;
    font-family: 'arial rounded MT';
    border:1px solid;
}
.text-position{  
  display:inline-block; 
  font-size:18px;    
  padding:0px 0px 0px 5px; 
  margin: 0px 0px -15px 0px;
}


.quick-link-text a{
  font-weight:500;
}

.quick-link-text a:hover{
  text-decoration: none;
  font-weight:1000;
}

.glyphicon-plus-sign{
  font-size:24px;
}

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">

<div >
        <h3>
            Quick Links
        </h3>
        <div >
          <a href="#" ><div >  First Link</div></a>          
        </div>
  <div >
    <a href="#" ><div > Second Link</div></a>
    </div>
    </div>

CodePudding user response：

.quick-links{
    margin-left: 15px;  
    line-height: 2;
    font-family: 'arial rounded MT';
    border:1px solid;
}
.text-position{  
  display:inline-block; 
  font-size:18px;    
  padding:0px 0px 0px 5px; 
  margin: 0px 0px -15px 0px;
}


.quick-link-text a{
  font-weight:500;
  display: flex;
align-items: flex-start;
}

.quick-link-text a:hover{
  text-decoration: none;
  font-weight:1000;
}

.glyphicon-plus-sign{
  font-size:24px;
}

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">

<div >
        <h3>
            Quick Links
        </h3>
        <div >
          <a href="#" ><div >  First Link</div></a>          
        </div>
  <div >
    <a href="#" ><div > Second Link</div></a>
    </div>
    </div>