Fabio Fabio - 5 months ago 12
HTML Question

Middle alignment icon+text in a div

I need to center vertically in a square link an icon and a text below.

enter image description here

Here the example:

Html:

<div id="button1">
<a href="#" class="btn btn-sq-lg btn-primary">
<i class="fa fa-user fa-5x"></i>
<br/>Demo Primary <br />Button
</a>
</div>


CSS

.btn-sq-lg
{
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}


Here fiddle: https://jsfiddle.net/fabioravizzotti/hutmay1r/3/

I need that the icon and the text are centered into the square.

I tried many solution:
vertical-align
,
line-height
but they didn't work.

Answer

You could use Flexbox, as in the below Snippet. Don't forget to prefix the Flexbox properties as necessary.

NOTE: The .btn class is only required in the selector if the Bootsrap files are included in your HTML after your own stylesheet.

.btn.btn-sq-lg{
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:200px;
    height:200px;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="button1">
    <a href="#" class="btn btn-sq-lg btn-primary">
        <i class="fa fa-user fa-5x"></i>
        <br>Demo Primary<br>Button
    </a>
</div>

By the way, you could achieve this with just a single tag, if you prefer, like so:

#button1{
    background:#337ab7;
    border:1px solid #2e6da4;
    border-radius:4px;
    box-sizing:border-box;
    align-items:center;
    color:#fff;
    display:flex;
    flex-direction:column;
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size:14px;
    justify-content:center;
    line-height:20px;
    padding:6px 12px;
    text-align:center;
    text-decoration:none;
    width:200px;
    height:200px;
}
#button1::before{
    content:"\f007";
    display:block;
    font-family:FontAwesome;
    font-size:5em;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-style:normal;
    font-weight:normal;
    line-height:1;
    margin:0 0 20px;
}
#button1:active,#button1:hover{
    background:#286090;
    border-color:#204d74;
}
#button1:focus{
    background:#204d74;
    border-color:#122b40;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<a id="button1" href="#">Demo Primary Button</a>

Comments