CODEWITHSUNDEEP
csstwitter-bootstrap
tony19
tony19

Reputation: 138336

How can I center this iframe object in a top bar with Bootstrap?

I'm trying to vertically center a GitHub button within a fixed top-bar in Bootstrap, but it keeps aligning along the top.

I tried using vertical-align: middle, but that had no effect.

.github-button {
    background: red; /* to visualize size */
    vertical-align: middle;
}

enter image description here

If I set the inner element's height and padding, I get the desired placement, but that seems fragile and "hacky".

.github-button > iframe {
    padding-left: 13px;    
    padding-top: 10px;     
    height: 45px;          
}

enter image description here

Here's the fiddle (widen your browser page or the panel size to switch from mobile mode to desktop mode): http://jsfiddle.net/aE9PS/2/

Any ideas on how to implement this cleanly? I'm open to suggestions of 3rd party libraries. Thanks

Upvotes: 1

Views: 265

Answers (2)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

check jsFiddle

CSS

.github-button {
    background: red;
    vertical-align: middle;
    padding-left: 13px;    
    padding-top: 7px;     
    height: 45px;  
}

Upvotes: 1

Ian Clark
Ian Clark

Reputation: 9347

  1. .github-button has a height: 100px;, replace it with 30px (to match the height of the iFrame)
  2. The top bar has a height of 50px, so add margin-top: 10px;

JSFiddle

Upvotes: 2

Related Questions