How can I center my icon horizontally and vertically?


Tags: css,twitter-bootstrap-3,font-awesome

Problem :

I am trying something like fontawesome and want to center the icon:

 <div class="col-md-2">
        <i class="fa fa-bandcamp" aria-hidden="true"></i>
 </div>

without using a special class todo this with , how can I manage with css? I tried text-align , center etc?



Solution :

If you can use flexbox, it can easily solved by align-items and justify-content. border is added just to show the side of the div.

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

<div class="container">
<div class="row">
 <div class="col-md-2" style="border: 1px black dotted; display: flex; align-items: center; justify-content: center; height: 50px;">
        <i class="fa fa-bandcamp" aria-hidden="true"></i>
 </div>
</div>
</div>


    CSS Howto..

    How to delete the gap

    How do I add a link to my CSS background?

    (css) how to display a div up as compared to the other divs

    how to make the osx-like border on css?

    How to style ul horizontally

    Show Limited Data Using jquery

    how to set up responsive columns with pure CSS?

    How to avoid line breaks inside `->` operator in `` blocks?

    SceneBuilder (by gluon) doesn't show imported fonts

    Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]

    How to organize CSS Sheets [closed]

    How do you position divs on a line with space in the middle, without fixing the width of the container?

    How do I show just one image and center it in a slider?

    show play icon on image hover

    How can I keep the progress bar number value centered and on top?

    How to vertically align an image in a container that fills the page?

    How to customize the size of JCoverFlip?

    How to make a shrink-to-fit container with max-height and scrollbars in the content area?

    My pure CSS dropdown isn't working, anybody knows how to fix it? [duplicate]

    How to CSS pairs of DIV text left/right of center

    How to remove an elements active state when a sub element is clicked

    How can I add flashing effect to an option tag?

    How can I vertically and horizontally center a DIV?

    How to center a div with dynamic & static content?

    how I can set color of anything in css [closed]

    How SCSS rule evaluation done by browser

    How to set text area to maximum width in bootstrap

    How to override content css property to not to use it on IE8?

    Show notification counter with bootstrap

    How to make text flow from left right bootstrap