I need to vertically align a font-awesome icon in the middle of a td. This td can contain a single or a double line of text, so it has a variable height. I just can't figure out how to align it. I tried everything from line-height over vertical-align to display: inline-table. Nothing worked. Maybe you have an idea.
I'm talking about the fa-tags icon. Here is my code:
HTML:
<table>
<tbody class="row">
<tr class="data">
<td class="date">
<span class="fa fa-tags"></span>
<div class="time">
<time datetime="2015-04-21">21.04.2015</time> -<br>
<time datetime="2015-04-24">24.04.2015</time>
</div>
</td>
<td class="hotel-data">
Hilton Barcelona
<span class="stars">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</span>
</td>
<td class="contract">
Vertrag <span class="fa fa-fw fa-download"></span>
</td>
<td class="invoice">
Rechnungen <span class="fa fa-fw fa-download"></span>
</td>
<td class="details">
Details <span class="fa fa-chevron-right fa-fw"></span>
</td>
</tr>
<tr class="data">
<td class="date">
<span class="fa fa-tags"></span>
<div class="time">
<time datetime="2015-04-21">21.04.2015</time>
</div>
</td>
<td class="hotel-data">
Best Western Alfa Aeropuarto Barcelona
<span class="stars">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</span>
</td>
<td class="contract">
Vertrag <span class="fa fa-fw fa-download"></span>
</td>
<td class="invoice">
Rechnungen <span class="fa fa-fw fa-download"></span>
</td>
<td class="details">
Details <span class="fa fa-chevron-right fa-fw"></span>
</td>
</tr>
</tbody>
</table>
CSS:
td {
padding: 7px 15px;
vertical-align: middle;
min-height: 57px;
}
.date .fa {
color: #999;
font-size: 18px;
margin-right: 5px;
}
.time {
display: inline-block;
font-size: 13px;
color: #d91e17;
}
EXAMPLE BOOTPLY
It looks like you just need to add vertical-align: middle to the .time element. In doing so, the sibling .fa-tags elements will be vertically centered.
Updated Example
.time {
display: inline-block;
vertical-align: middle;
font-size: 13px;
color: #d91e17;
}
Related
I cannot find out why text1 does not center horizontally and why the icons do not appear (I have only a black point instead of blue icon and
circle).
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>
CSS
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}
The reason is because you didnt include the link to font-awesome.min.css I just added it and everything works fine.
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>
I have a column using bootstrap where I have a font awesome icon. The height of each div can vary slightly so I need the line to adjust to the height of the div. I have come across many examples to place the line down the center of the div but all I can find are ones that cause the line to go through the icon. I would like to have the line start under the icon.
I would show you an example CSS but I really don't have anything I can show you. I don't even know where to start.
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
</div>
Example:
You can also do it wrapping your i element, then use a css pseudo-element to print out your line.
<span class="vertical-line-icon" >
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</span>
Then the CSS:
.vertical-line-icon {
display: table;
height: 100%;
}
.vertical-line-icon:after {
content: '';
display: table;
margin: 0 auto;
width: 4px;
height: 100%;
background-color: #555555;
margin-top:5px;
}
See Fiddle: https://jsfiddle.net/rn9g21fj/
may be try something line this? dividing eaahc section with bootstrap's row?
<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"> </i><br>
<img src="straight-line.jpg" />
</div>
</div>
<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"> </i><br>
<img src="straight-line.jpg" />
</div>
</div>
You can do this using css's pseudo-element ::after. Just make a block after the i tag and align it in center using position:absolute;
i {position: relative;}
i::before {font-size: 30px;}
i::after {content: ""; display: block; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: 6px; background: #556e79; height: 180px;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
You would need to use CSS to make line vertical and to adjust the icons. I have used class="row" to make lines separated
I gave it a try and created a codepen aswell CodePen Vertical Line
vr {
width:10px;
background-color:#000;
position:absolute;
top:25px;
bottom:0;
left:15px;
height:100px;
}
<div class="row">
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i><vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
</div>
</div>
Hope this helps
I'm having a hell of a time trying to get a background color to show on a div. I have tried specifying width, height, overflow, etc. with no luck. The code is below. I can get inner div background to change, but not the containing div.
The div in question is header-top-container. Any help is greatly appreciated.
.header-top-container {
background: #F0F0F0;
overflow: hidden;
}
.header-top-container>.main-container {
padding-top: 0;
padding-bottom: 0;
display: flex;
}
.main-container {
position: relative;
max-width: 1260px;
margin: 0 auto;
padding: 15px;
}
body .header-top-container .external-store-tab {
width: 360px;
}
body .header-top-container .external-store-tab,
body .header-top-container .account-cart-wrapper {
position: relative;
width: 70%;
}
<div class="header-top-container">
<div class="main-container header-main-container">
<div class="external-store-tab">
<div class="tab-item">
<a href="https://www.example.org">
<img src="https://www.example.org/logo-foundation.png" class="tab-logo">
</a>
</div>
<div class="tab-item active">
<a href="http://store.example.org/">
<img src="https://www.example.org/logo-store.png" class="tab-logo">
</a>
</div>
</div>
<div class="account-cart-wrapper">
<a href="http://www.example.org/contact/" class="account-link hide-mb">
<span class="label" style="color:#008CA8;">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="bar-text" tyle="font-family: 'Open Sans',sans-serif;">Contact</span>
</span>
</a>
<a href="tel:800.222.5870" class="account-link">
<span class="label" style="color:#008CA8;">
<i class="fa fa-phone fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">800.222.5870</span>
</span>
</a>
<a href="https://store.example.org/customer/account/login/" class="skip-link skip-account account-link sign-in-bar">
<span class="label">
<i class="fa fa-user fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">Sign in</span>
</span>
</a>
<a href="https://store.example.org/checkout/cart/" class="skip-link skip-account account-link">
<span class="label">
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
Add to class "header-top-container", property "position:inherit" class, like following:
.header-top-container {
background: #F0F0F0;
overflow:hidden;
position: inherit;
}
Your #custom-layer1 has a background that matches the page. Your header-container-top is changing color, but is being 'painted' over so to speak by the background of #custom-layer1.
I have googled and searched on SO about this issue, and I just cant fix it.
It is really, really annoying and driving me crazy!!
I have a menu that is made up of several blocks. These are created by divs with display: inline-block
I have also tried float:left, but I need these all centered on the screen and this doesn't work.
With my inline-block, it works fine and adjusts to the size of the screen by making more rows - but the last row is always offset by 2 pixels!
This is my code and css...
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
.menublock {
width: 170px;
height: 150px;
margin: 0px;
padding: 0px;
display: inline-block;
background: #0074bc;
color: #fff;
cursor: pointer;
vertical-align: top;
}
.menublock-inner {
padding-top: 30px;
}
And the result is...
Take a look at this old link always gets me:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
So id do mine a little different like:
body {
background: #000;
}
.wrapper {
margin: 30px auto;
padding: 0;
text-align: center;
width: 100%;
max-width: 610px;
}
.menublock {
margin: 0;
padding: 0;
display: inline-block;
}
.menublock-inner {
margin: 0;
padding: 0;
display: table;
vertical-align: middle;
background: rgba(0,94, 184, 1);
height: 200px;
width: 200px;
}
.icon {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.fa {
}
span {
padding-top: 5px;
display: block;
color: white;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
</div>
<!-- eo: wrapper -->
Can't seem to get my piece of text to align with the check icon, Any help please and thanks
<div class="col-md-12" style="background: #d9232a; padding: 20px;">
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> Fully Sculptured</p></br></div>
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> 40mm Triple Glazing</p></br></div>
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> PAS 23 & 24 Approved</p></br></div>
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> Highly Security Options</p></br></div>
</div>
The default alignment of inline elements is baseline so we need to reset the vertical-align property to something more appropriate.
.fa {
vertical-align: middle;
}
Should do it.
.fa {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" style="background: #d9232a; padding: 20px;">
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">Fully Sculptured</p>
</br>
</div>
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">40mm Triple Glazing</p>
</br>
</div>
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">PAS 23 & 24 Approved</p>
</br>
</div>
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">Highly Security Options</p>
</br>
</div>
</div>
Set the i inside the p. Then apply vertical-align: middle; to the p.
<div><p style="vertical-align: middle; display: inline;"><i class="fa fa-check-square fa-2x"></i> Fully Sculptured</p></br></div>