I am trying to vertically align font icons. I have tried vertical-align: middle but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.
div {
font-size: 50px;
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
margin-top: 20px;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
vertical-align: middle;
text-transform: none;
}
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<div>
<span class="icon icon-shopping-cart"></span> Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
You can try vertical-align: text-bottom or vertical-align: text-top, depending on which one you feel is more vertically centered.
For your shopping cart icon, it seems text-top is most vertically centered.
Example at: https://jsfiddle.net/p3g189bg/
Another nowadays example via Flexbox.
span {
font-family: helvetica, arial, sans-serif;
display: inline-flex;
align-items: center;
padding: 0 1rem;
font-size: 3rem;
line-height: 4rem;
border: 1px solid #ffb0d1;
}
/* target all Font Awesome 5 <svg> tags */
.svg-inline--fa {
padding-right: 1.5rem;
}
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
<span>
<i class="fas fa-shopping-cart"></i>
Shopping Cart
</span>
Try using line-height attribute
You can set it to 0.5,1,1.5 etc
You can try for vertical-align:middle;
or line-height:1;
or using padding property you can set icon position
example using vertical:middle; property js fiddle: http://jsfiddle.net/vrcarwrj/
Alternatively to the above, using the span element method you describe, you could relatively position the span tag, relative to its parent div element.
Like:
div{
position: relative;
}
span.icon-shopping-cart{
position: relative;
top: 5px;
}
You can try using valign: middle
and/or then setting the line-height to 1px, 1.5px, etc.
Related
So in the picture you can see that the number "5384" and the number "50" dont float to the same height. I know that the paragraphs both float to the exact top of the line but how do i get them to look like they're on the same height?
I don't want to use "margin-top: some pixels" because that wouldn't scale properly would it?
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings_cents {
font-size: 1.5rem;
margin: 0 0 0 0.3rem;
display: inline;
vertical-align: top;
}
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
This can easily be achieve using sup html tag
Read more about this tag here
p{
font-weight: bold
}
p sup{
font-weight: normal
}
<p class="savings">5.384 <sup>50</sup></p>
You can easily style that using tag or classes
Just add a parent element and use display: flex. You can check both elements height is same. You can use other flex properties to change the alignment if you want.
p{margin: 0;} /*resetting p margin*/
.savings-ctnr {
display: flex;
}
.savings {
font-size: 3rem;
}
.savings_cents {
font-size: 1.5rem;
}
<div class="savings-ctnr">
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
</div>
We can inspire from tag <sup>, make <span> with class savings_cents, wrap it with element with class savings and make something like this:
.up-small {
vertical-align: super; /*make element to be aligned with the superscript baseline of the parent*/
font-size: 50%; /*fits proportions*/
}
Example look into snippet
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings .savings_cents {
vertical-align: super;
font-size: 50%;
}
<p class="savings">5.384<span class="savings_cents">50</span></p>
I'm trying to make a headers for the chapters in my short story using a collapsible div. I use two different fonts / styles and three layers of divs to make it look the way I want it to. Unfortunately the text is several pixels too low, and it hurts my eyes when I see it.
I know that inline display doesn't really allow for vertical align (my paddings are ignored). I tried using "inline-block" to no avail. I tried top-padding the left ">" symbol, but that makes the entire construction move downwards. I've been hammering at this for the past 2 hours, I give up :D.
Here is my HTML markup as well as the CSS.
<div class="ShortStoryHeaderDiv" onclick="toggleContentDiv('h1','c1');">
<div class="ShortStoryHeaderCenterDiv">
<div id="h1L" class="ShortStoryHeaderDivLeft">></div>
<div class="ShortStoryHeaderText">Must... align... text</div>
<div id="h1R" class="ShortStoryHeaderDivRight"><</div>
</div>
</div>
CSS:
.ShortStoryHeaderDiv
{
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
height: 3em;
text-align: center;
background-color: #DDD;
cursor: pointer;
}
.ShortStoryHeaderCenterDiv
{
padding-top:0.2em;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ShortStoryHeaderDivLeft
{
display:inline-block;
padding-right: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderDivRight
{
display:inline-block;
padding-left: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderText
{
display:inline;
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
text-align: center;
text-decoration: underline;
color: #00F;
}
You could try and use display:table-cell to vertically-align:middle
or set a height and then set the line height to the same.
e.g. height: 40px; line-height:40px;
Managed to make it work by using this in ShortStoryHeaderText CSS class, thanks to SkelDave for reminding me about vertical align. It is awkward that the padding-top ONLY started to work once that vertical-align: top was specified. It is ignored otherwise.
display:inline-block;
padding-top:3px;
vertical-align:top;
I have two labels in the footer of my mobile website. Sometimes the title of the selected product is large and it comes very close to the price as shown below:
THE HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really really really rea</span>
<div class="stickyPrice">$1142.00</div>
</div>
The styles for both the elements are shown below:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
width: 85%;
}
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
margin-right: 20px;
}
How can I improve it? Wrap it!
This behavior is because you have a total width of the elements of 100% and a margin-right of 20px. It is overflowing.
put the margin-right on the .stickyProductctName;
add display:inline-block; to .stickyPrice
How bout stack them on top of each other for mobile view?
CSS:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
display: block;
text-align: center;
}
#stickyFooter .stickyPrice {
font-weight: bold;
text-align: center;
}
Here is a JSFiddle.
http://jsfiddle.net/shannabarnard/Ls75o3cr/
Firstly, you need to put both elements in a span, it doesn't work well semantically to have one as a span and the other as a div contained within another div.
Change your widths, and give the price both a left and right padding.
HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really re ally reall yreally really re ally really re reall y really really rereally really really re rea</span>
<span class="stickyPrice">$1142.00</span>
</div>
CSS:
.stickyProductctName {
text-transform: uppercase;
float: left;
display:inline;
width:85%;
}
.stickyPrice {
font-weight: bold;
width: 10%;
float: right;
margin: 0 10px;
}
The mistake is that you used margin instead of padding. As long as border-box is being used (It is standard on frameworks), padding eats the inside of containers instead of adding it. All you need to change is:
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
padding-right: 20px;
}
In case you don't have border-box on the site, here is a good article about it. Frameworks usually use a rule like this:
* {
box-sizing: border-box;
}
I want the "values" to be right-aligned. This is my HTML:
<p class="blueBold">Existing Building</p>
<p class="values">19,322 sf</p>
</br>
<p class="blueBold">Acreage</p>
<p class="values">3</p>
...and my CSS:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
}
.values {
color: white;
text-align:right;
display: inline-block;
}
What do I need to do to get the values to hug the right edge?
jsfiddle is here: http://jsfiddle.net/clayshannon/wvuQz/1/
Not sure if I understood your question correctly. But if you add a width then you can have the text right aligned to the box like below:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
width: 200px;
}
.values {
color: white;
text-align:right;
width: 100px;
display: inline-block;
}
Working Demo
Note: This is not for aligning the text to the right edge of the screen. This is for making the text within the .values element right align within the box.
You are using display: inline-block; which will make the element inline, it is no more a block level element, hence there is no space for the text to align to the left or to the right.
Just wrap the elements inside a div and than float the element to the right.
Demo
Also am using
.wrap {
overflow: hidden; /* This will clear floats */
}
For a better clearfix, you can also use the below snippet and call the class on parent element.
.clear:after {
clear: both;
display: table;
content: "";
}
You can also assign width to the .wrap here, so that elements stay inside boundaries.
A block parent container should have the text align to work. In your case it's the body, itself.. DEMO
body {
background-color: orange;
text-align:right;
}
Try this:)
.blueBold {
color: navy;
position:absolute;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
}
.values {
color: white;
text-align:right;
}
fiddle: http://jsfiddle.net/wvuQz/5/
The semantic approach:
<div>
<p class="blueBold">Existing Building</p>
<p class="values pull-right">19,322 sf</p>
</div>
<div>
<p class="blueBold">Acreage</p>
<p class="values pull-right">3</p>
</div>
CSS:
.pull-right {
float: right;
}
Demo: http://jsfiddle.net/wvuQz/7/
More Info:
http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/
I am making a website where I have a h1 with a large font size. What I am trying to do is to make a superscript that is aligned to the top of the text but no matter I do sup is not aligned properly.
Here is the plunk of what I am working on!
http://plunker.co/edit/gnS915O9PVAe9VKktqFh?p=preview
So in this plunk, I am trying to make "TM" a superscript of ACME. However, it
Mark up is this :
<h1>
acme
<sup>TM</sup>
</h1>
Style is this:
body {
padding: 60px;
font-size: 10px;
}
h1 {
font-size: 12em;
text-transform: uppercase;
line-height: 1em;
}
h1 sup {
font-size: .1em;
vertical-align: super;
}
Set the vertical align and the line height:
h1 sup {
font-size: .1em;
vertical-align: top;
line-height: 35px;
margin-left: -30px;
}
I updated the answer to push the sup to the left with a negative margin.
Plunker: http://plnkr.co/T45y7ob43mdNY3fvC73S?p=preview
The only way I could make this work (at all) in Chromium 24/Ubuntu 12.10, is to use:
h1 sup {
position: relative;
display: inline-block;
font-size: .1em;
top: -2em;
}
(Forked, I think) Plunker demo.
Your extra linebreak after acme is making it wrap to the next line... See your forked PLUNKER
<h1>
acme<sup>TM</sup>
</h1>