I was wondering what I needed to input, in order for the icon to be BELOW/UNDER the text.
<a href="#"><div class="resume">
<h4><i class="fa fa-address-card" style='display: block' ></i> Resume</h4>
</div> </a>
This code states that the icon is above.
Thanks in advance!
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: 8%;
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>
answer from Center text above font awesome icon?
Related
JS: http://jsfiddle.net/1cmtpnha/
I have this:
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
padding_5 just contains padding css
card-body is bootstrap 4
I tried this:
[class*="icon-"] {
display: inline-block;
width: 100%;
}
.icon-center i {
text-align: center;
}
and this:
.icon-center {
margin: auto;
display: block;
}
and neither worked. Those were top checked responses i saw on SO.
What is wrong with my code?
I want it to be horizontally centered within a card-body.
It's not the bootstrap either. I tested it on a separate page with no css or card-body. Still same issue.
You have three options here
1. Parent: text-align: center
set text-align: center to body.
2. Child: display: block and text-align: center
set display: block to .icon-center.
3. Child display: block , set width and margin: auto
set display: block , width: 20px and margin: auto to .icon-center.
https://codepen.io/blackcityhenry/pen/WPexKp
.icon-center {
text-align:center;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
Just add text-align: center; to the parent card-body
.card-body{
border: 1px solid red;
text-align: center;
}
.padding_5 {
padding: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
How can I float the image of the modem as shown below, to be above the span below it. I have used Div for the label and span for the contents, however this can be changes to suit. see my code below.
Image:
Code:
<style>
#primary_modem_label{
position: absolute;
width: 100%;
height: 15%;
background-color: black;
background-image:url(/assets/Billion7800NX.png);
background-size: 30px; /* <------ */
background-repeat: no-repeat;
background-position: left center;
font-family:arial;
font-size: 1.2vw;
color:white;
}
.primary_modem_class{
position: relative;
float: left;
width: 30%;
font-size: 2.5vw;
margin:0.2%;
background: #aaaaaa;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>
<div class="primary_modem_class" id="primary_modem_stable_div">
<div id="primary_modem_label">              Primary Modem</div>
<span class="font1"><br>Down Link: </span>
<span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>
<span class="font1"><br>Up Link: </span>
<span id="local_primary_connection_adsl_up_speed" class="font4">updating</span>
<span class="font1"><br>Current Up speed: </span>
<span id="primary_upload_speed" class="font4">updating</span>
<span class="font1"><br>Uptime: </span>
<span id="local_primary_connection_uptime" class="font4">updating</span>
</div>
Why can't use img tag instead of background-image like the below?
Also,please use text-align to align the "Primary modem" in the center instead of using  
<style>
#primary_modem_label{
position: absolute;
width: 100%;
height: 15%;
font-family:arial;
font-size: 1.2vw;
color:white;
background-color:black;
text-align:center;
}
.primary_modem_class{
position: relative;
float: left;
width: 30%;
font-size: 2.5vw;
margin:0.2%;
background: #aaaaaa;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>
<div class="primary_modem_class" id="primary_modem_stable_div">
<div id="primary_modem_label"><img src="w3css.gif" align="left"/> Primary Modem</div>
<span class="font1"><br>Down Link: </span>
<span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>
<span class="font1"><br>Up Link: </span>
<span id="local_primary_connection_adsl_up_speed" class="font4">updating</span>
<span class="font1"><br>Current Up speed: </span>
<span id="primary_upload_speed" class="font4">updating</span>
<span class="font1"><br>Uptime: </span>
<span id="local_primary_connection_uptime" class="font4">updating</span>
</div>
use the tag and write the path on the src attribute... then, you have 2 options, put the img (html) before whatever you want to be on top, and/or use z-index in css or style attribute to make the image come to top.
I am trying to align both the text and the right arrow (with Google fonts) in the middle of the div but no matter what I tried, I could not succeed. How can they be aligned?
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;">
<div style="float:right;">
<span class="material-icons" style=" font-size:2rem;"></span>
</div>
<div style="padding-left:20px; padding-right:20px;">
Some Text
</div>
</div>
You can either set margin-top: 7px on the text element, or preferably, set a line-height equal to the height of the container (in this case, 36px), minus a few pixels to counter the height of the icon. In this example, I've gone with 34px:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;">
<div style="float:right;">
<span class="material-icons" style=" font-size:2rem;"></span>
</div>
<div style="padding-left:20px; padding-right:20px; line-height: 34px;">
Some Text
</div>
</div>
Hope this helps! :)
You can use absolute positioning on the arrow, and top: 50%; transform: translateY(-50%); to center it vertically.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block; position: relative;">
<span class="material-icons" style=" font-size:2rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);"></span>
<div>
Some Text
</div>
</div>
I'm probably really sleepy and missing something easy here. I've tried every margin and padding available but I'm unable to lift a span (div or any other text containing element for that matter) that contains some text to the right level.
What's the best way to achieve this? In the fiddle below, i want to align it with the font-awesome icon.
.add-cohorts-button > a > i {
padding-top: 5px;
}
.add-cohorts-button > span {
padding-left: 8px;
/*any amount of bottom margin/padding doesn't work. Try it. Height didn't either */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-3 add-cohorts-button">
<a href="addcohort.form"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span></a>
</div>
Way out of this fix?
This Suits you?
Adjust the margin according to your icon height.
.add-cohorts-button > a > i {
padding-top: 5px;
}
.add-cohorts-button span {
position:absolute;
padding-left:8px;
margin-top:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-3 add-cohorts-button">
<a href="addcohort.form"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span></a>
</div>
Use display: inline-block on your link so that it can fit its height to its contents, then use vertical-align: middle, like this:
.add-cohorts-button a {
display: inline-block;
}
.add-cohorts-button > * {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-3 add-cohorts-button">
<i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span>
</div>
Version with the whole thing as a link:
.add-cohorts-button {
text-decoration: none;
}
.add-cohorts-button i {
display: inline-block;
}
.add-cohorts-button > * {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="col-xs-3 add-cohorts-button" href="addcohort.form">
<i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span>
</a>
I am trying to align an ionicon icon and text to its side in a vertical way inside a button using Bootstrap 3.
I want the text to be vertically aligned to the center of the button with the icon also vertically aligned.
The default seems to align the icon and the text using their lowest points.
My HTML is:
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>
My CSS is:
.main-header .navbar .dropdown-menu li a.sign-out {
color: #fff !important;
vertical-align: middle;
}
.ion-fw {
width: 1.28571429em;
text-align: center;
}
My CSS targets the pair OK as their colors are correct. I have tried padding and margins on .menu-label but that moves the text and icon.
How do I adjust the text to the middle of the icon's height? Thanks!
Example:
Change this
.ion-fw {
width: 1.28571429em;
text-align: center;
}
to this
.ion-fw {
width: 1.28571429em;
text-align: center;
vertical-align: middle;
}
vertical-align works on elements in the same container and so must be applied to the contents...not the parent element.
.ion-fw {
width: 1.28571429em;
text-align: center;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>
This works for me:
.ion-fw {
display: inline-block;
vertical-align: bottom;
height: 1.4em;
font-size: 1.1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>