How can I horizontally and vertically center text above font awesome icon?
Example code:
<div>
<i class="icon-circle"></i>
<span>text</span>
</div>
Just set display:table-cell, vertical-align: middle and text-align: center to the div
CSS
div{
display: table-cell;
text-align:center;
vertical-align: middle;
}
p {
<!-- set the paragraph position as absolute -->
vertical-align: bottom;
display: inline-block;
position: absolute;
}
i {
<!-- set the image position relatively -->
vertical-align: top;
margin-top: 6%;
margin-left: 0.7%;
position: relative;
}
<head>
<!--let's assume u chose the fa-camera-retro icon-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="icon_labeled">`
<p>Truc</p>
<i class="fa fa-camera-retro"></i>
</div>
</body>
Is this what you're trying to achieve?
HTML:
<div>
<div class="content">
<span>text</span>
<i class="fa fa-camera-retro"></i>
</div>
</div>
CSS:
div{
width: 200px;
height: 80px;
background-color: #ddd;
text-align: center;
display: table;
}
div .content {
display: table-cell;
vertical-align: middle;
}
div .content span {
display: block;
}
http://jsfiddle.net/63ovh9xk/
Using Bootstrap 2.3 I achieved it like this:
<span class="icon-stack" style="text-align:center;">
<i class="icon-circle icon-2x"></i>
<span class="icon-stack"><strong>Some text</strong></span>
</span>
Related
I have icon with list of numbers to the left of icon
<div>
<i id=ico class='icon icon-2x icon-phone'></i>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
Here is the css
div {
border: 1px solid #ccc;
display: inline-block;
margin: 60px;
padding: 4px;
}
.text {
margin-left: 15px;
}
#ico {
vertical-align: middle;
}
But, I have this result,
And, I want to achieve this result using css. To center the icon beside the numbers.
Here is my jsfiddle -> http://jsfiddle.net/F3KyK/1224/
The display: flex property works for you.
http://jsfiddle.net/Sampath_Madhuranga/F3KyK/1264/
div.wrapper {
display: flex;
align-items: center;
padding: 4px;
}
.text {
margin-left: 15px;
}
/* #ico {
vertical-align: middle;
} */
.icon-box {
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div class="wrapper">
<i id=ico class='icon icon-2x icon-phone'></i>
<div class="icon-box">
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
</div>
This can be accomplished with flexbox:
.container {
display: flex;
align-items: center;
margin: 40px;
padding: 4px;
}
.text {
margin-left: 15px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div class='container'>
<i id=ico class='icon icon-2x icon-phone'></i>
<div class="list">
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
</div>
You can wrap the phone number spans in a div, then give that div and the icon display: table-cell:
div {
display: inline-block;
margin: 40px;
padding: 4px;
}
.text {
margin-left: 15px;
}
#ico {
vertical-align: middle;
display: table-cell;
}
div>div {
display: table-cell;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div>
<i id=ico class='icon icon-2x icon-phone'></i>
<div>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span> <br>
<span class="text">123-4567-890</span>
</div>
</div>
I am trying to use Material Design Lite library.
What's the best way to put an icon in one of the tabs and have the tab text below it (keeping in mind best practices and scalability).
https://codepen.io/anon/pen/BzAEQb
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<i class="material-icons">person</i><span class="MY-CLASS-2">TAB 1</span>
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
html
<div class="item">
<img src=""/>
<span class="caption">Tab</span>
</div>
css
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 50px;
}
img {
width: 30px;
height: 30px;
background-color: blue;
}
.caption {
display: block;
}
http://jsfiddle.net/ZhLk4/360/
I can do it by structuring one of the divs like so:
<i class="material-icons">person</i><span class="MY-CLASS-2">Profile</span>
And adding the following styles:
.MY-CLASS-1 {
position: relative;
width: 60px;
}
.MY-CLASS-2 {
display: block;
position: absolute;
bottom: -12px;
font-size: smaller;
left: 198px;
}
https://codepen.io/anon/pen/XKEQZr
How can I make this code better overall?
ul,
ul li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
}
ul li a {
background: #efefef;
padding: 0 15px;
text-decoration: none;
line-height: 40px;
display: inline-block;
}
ul li a span {
background: url('http://findicons.com/files/icons/2255/cologne/32/user.png') no-repeat #ccc;
width: 30px;
height: 30px;
margin: 0 15px 0 0;
display: inline-block;
vertical-align: middle;
}
<html>
<head>
</head>
<body>
<ul>
<li><span></span>aaaa</li>
<li><span></span>bbbb</li>
<li>cccc</li>
<li><span></span>dddd</li>
</ul>
</body>
</html>
I am pretty new to CSS display, currently I want to center align some text and icon(vertically), but it just not works:
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width:auto;
height: 30px;
background-color: lightblue;
float:right;
line-height: 30px;
}
.menuitem {
display: inline-block;
line-height: 30px;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I thought a line 100% line height can control the text and inline-block elements vertically align center, but if you pay a specify attention to those icon, they are a little above the center.
"Why inline-block can not be vertically aligned?"
The point of in-line is to have elements be propagated to the screen from left-to-right; so, horizontally.
If you want it vertically, don't use elements styled with in-line because the elements naturally propagate from top to bottom; so, vertically.
vertical-align:middle seems to be what you are after but you need to apply it to the pseudo-elements too.
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width: auto;
height: 30px;
background-color: lightblue;
float: right;
line-height: 30px;
}
.menuitem,
.menuitem::before {
display: inline-block;
vertical-align: middle;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>
How does div sub set div center to middle?
Text can be different, so margin or line-height in this situation is not a good solution.
CSS:
.center {
background-color: #336699;
width: 200px;
height: 200px;
}
.sub {
display: inline-block;
vertical-align: middle;
}
HTML:
<div class="center">
<span class="sub">
Some text text...
</span>
</div>
A possible solution is:
HTML
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
CSS
.center
{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub
{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
A live demo, if needed, are at http://jsfiddle.net/vladsaling/6nTGF/.