CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
geejay
geejay

Reputation: 5618

Vertical align of buttons and text in panel heading

I am trying to vertical align the buttons with the header text in the following panel - how do I align the text vertically with the buttons?

<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading clearfix">
      <div class="pull-left">
        <p>Lorem ipsum</p>
      </div>
      <div class="pull-right">
        <span class="glyphicon glyphicon-list-alt"></span>
        <div class="circle-icon">
          <span class="glyphicon glyphicon-option-vertical circle-icon-glyphicon"></span>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="panel-body">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
    </div>
  </div>
</div>

CSS:

.circle-icon {
  display: inline-table;
  text-align: center;
}

.circle-icon-glyphicon {
  padding: 5px;
  border-radius: 50%;
  vertical-align: middle;
  display: table-cell;
  background-color: #bbb;
}

Fiddle:

http://jsfiddle.net/bbn5vfwt/

Upvotes: 0

Views: 1039

Answers (3)

Zuber
Zuber

Reputation: 3473

Solution No: 1

.panel-heading .pull-left p {
    margin-bottom: 0;
}

Solution No: 2

Your HTML will be like this 

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <p>Lorem ipsum</p>
        <div class="circle-icon">
            <span class="glyphicon glyphicon-list-alt"></span>
          <span class="glyphicon glyphicon-option-vertical circle-icon-glyphicon"></span>
        </div>
     </div>
    <div class="panel-body">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
    </div>
  </div>

and your CSS will be like this

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-heading.clearfix:before,.panel-heading.clearfix:after {
  content: none;
}
.panel-heading p {
    margin-bottom: 0;
}
.circle-icon {
    display: flex;
    align-items: center;
}
.circle-icon-glyphicon {
    padding: 5px;
    border-radius: 50%;
    vertical-align: middle;
    display: table-cell;
    background-color: #bbb;
    margin-left: 10px; // Added
}

Updated your fiddle with solution 2 here

Upvotes: 1

patelarpan
patelarpan

Reputation: 8011

Remove margin-bottom form p http://jsfiddle.net/bbn5vfwt/1/

p.heading-text {
  margin-bottom: 0;
}

Here .heading-text class given to p

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Bootstrap applying 10px bottom margin for the paragraph. That is the reason is not aligned when you use images. Apply margin-bottom:0px for your title paragraph like below.

<div class="pull-left">
    <p style="margin-bottom:0px">Lorem ipsum</p>
</div>

DEMO

Upvotes: 1

Related Questions