Question 61298 in Twitter Bootstrap Question posted in

How Can I align Text In Center-Twitter bootstrap

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 class="quick-links col-lg-4 col-md-4">
        <h3>
            Quick Links
        </h3>
        <div class="quick-link-text">
          <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position">  First Link</div></a>          
        </div>
  <div class="quick-link-text">
    <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> Second Link</div></a>
    </div>
    </div>
Tags:

2

Answers


  1. 0 
    .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 class="quick-links col-lg-4 col-md-4">
        <h3>
            Quick Links
        </h3>
        <div class="quick-link-text">
          <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position">  First Link</div></a>          
        </div>
  <div class="quick-link-text">
    <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> Second Link</div></a>
    </div>
    </div>
    Login or Signup to reply.
  2. 0

    Don’t want to use flexbox? you can use position property.

    .quick-link-text a {
  font-weight: 500;
  position: relative;
  padding: 0 25px;
}
.glyphicon-plus-sign:before {
  position: absolute;
  bottom: -5px;
  left: 0px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search