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.
An example on Jsfiddle:
https://jsfiddle.net/crphowLg/7/
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<style>
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;
}
</style>
<div>
<span class="icon icon-shopping-cart"></span>
Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
Thank you.
I think it difference size of font. Because you using fanatic-icons font for it. So i think you try add padding for cart::before
display: inline;
font-family: "fanatic-icons" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
padding-bottom: 15px; //added it
text-transform: none !important;
vertical-align: middle;
goodluck !
DEMO
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 15px;
vertical-align: middle;
text-transform: none;
float: left;
}
Giving it float left and adjusting the margin-right will make it fit at the middle.
Update your css like below. I have added a class to your HTML as well.
This can be achieved by using display:inline-block; and float properties in css
DEMO
CSS
div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
display :inline-block;
width : 50%;
}
.cart1{
display: inline-block;
width:50%;
float:right;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
text-transform: none;
}
HTML:
<div class ="cart1">
<span class="icon icon-shopping-cart"></span>
Cart
</div>
<div class="cart">
Cart
</div>
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 2 years ago.
.main-heading {
display: block;
font-family: "Josefin-Sans", sans-serif;
font-size: 70.6px;
font-weight: bold;
text-align: center;
color: #ba9a45;
}
.subheading {
font-family: "Cardo", sans-serif;
font-size: 23.5px;
text-align: center;
color: #fff;
padding-top: 30px;
}
<!-- Headings -->
<div>
<h1 class="main-heading">ATLANTIC</h1>
<h1 class="main-heading">CASINO</h1>
<h3 class="subheading">FEED YOUR DESIRES</h3>
</div>
I seem to not be able to make my h1 and h3 background only as wide as the text and not span the whole width of the line.
How can I reduce the background of the h1 and h3 so it only spans to the end of the text?
--
I've managed to resolve my issue by taking into consideration all the advice given by users below.
Have a look at my revised code which works:
<div class="title-headings">
<h1 class="main-heading">ATLANTIC</h1>
<h1 class="main-heading">CASINO</h1>
<h3 class="subheading">FEED YOUR DESIRES</h3>
</div>
.main-heading{
display: block;
margin-left: auto;
margin-right: auto;
width: max-content;
font-family: "Josefin-Sans", sans-serif;
font-size: 70.6px;
font-weight: bold;
color: #ba9a45;
}
.subheading{
display: block;
margin-left: auto;
margin-right: auto;
width: max-content;
font-family: "Cardo", sans-serif;
font-size: 23.5px;
color: #fff;
padding-top: 30px;
}
Headings (<h1>, <h2>, ...) are block-level elements (display: block); if you want these to only take up as much space as the text is, you should set these to display: inline.
You can easily do it by:
.element{
display: inline-block
}
It will now take up only the width it is supposed to take!
Whilst the comments and other answers are correct in that - display : inline-block is the correct answer if the text was to be on one line, they do not address the fundamental semantic flaw in the code - you should have only one h1 element and for that to be followed by a h2.
It is important to maintain the correct hierarchy or headings in your page structure.
The way that I would do this is to have the h1 to be display: inline-block and within that to have spans for each word - and to have these spanss a display: block so that they are on separate lines.
Note that I added a red border to demonstrate the layout. And also added a text-align: center to the wrapping div to allow al lthe text to be centered.
div {
text-align: center;
}
.main-heading {
display: inline-block;
font-family: "Josefin-Sans", sans-serif;
font-size: 70.6px;
font-weight: bold;
color: #ba9a45;
border: solid 1px red
}
.main-heading span {
display: block;
}
.subheading {
font-family: "Cardo", sans-serif;
font-size: 23.5px;
text-align: center;
}
<!-- Headings -->
<div>
<h1 class="main-heading">
<span>ATLANTIC</span>
<span>CASINO</span>
</h1>
<h2 class="subheading">FEED YOUR DESIRES</h2>
</div>
To make a block HTML element not span the full width of its container, change its style.display property to inline-block.
You can do it with CSS like this:
display: inline-block
If you wanted to do it in the element itself, the equivalent would be:
style="display: inline-block;"
On .main-heading change display:block; to display:inline-block;
.main-heading {
display: inline-block;
font-family: "Josefin-Sans", sans-serif;
font-size: 70.6px;
font-weight: bold;
text-align: center;
color: #ba9a45;
}
.subheading {
font-family: "Cardo", sans-serif;
font-size: 23.5px;
text-align: center;
color: #fff;
padding-top: 30px;
}
<div>
<h1 class="main-heading">ATLANTIC</h1>
<h1 class="main-heading">CASINO</h1>
<h3 class="subheading">FEED YOUR DESIRES</h3>
</div>
I'm styling the section headings for a website and I can't quite get a span symbol and a H1 heading to align properly. This is how it looks on the site -
Annoyingly, when I've come to include the code in this snippet the two elements seem to align. When I check the console the span element seems to have a buffer around the symbol which prompts it slightly out of line as you can see in the image. I'm using bootstrap for the site, could this be a hidden rule that I'm missing?
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
}
.secthead h1, span {
display: inline-block;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
Just use vertical-align: middle; in both tag & remove padding from bottom in h1 tag. check updated snippet below..
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 0px 20px;
}
.secthead h1, span {
display: inline-block;
vertical-align: middle;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
You could use a height and line-height.
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
margin: 0;
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
line-height: 92px;
}
.secthead h1, .secthead span {
height: 92px;
display: inline-block;
vertical-align:top;
height: 92px;
}
<div class="secthead">
<span style="color: rgb(255,128,55);">+</span>
<h1>Who We Are</h1>
</div>
Hi in the below code logo and text was not displaying. when I am adding the style to vertical-align:center.I want image and text should me center
Any one help me
.logo{
display:inline-block;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}
<div class="logo">
<img src="images/logo_sml.jpg">
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
Update log class like this:
.logo{
text-align: center;
display:inline-block;
width:100%;
}
For horizontal align change logo style to:
.logo {
display: block;
text-align: center;
}
And HTML to:
<div class="logo">
<p><img src="images/logo_sml.jpg"></p>
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
If you want to center the div only horizontally, simply put the .logo div inside a center element, like this: <center><div class="logo">...</div></center>.
If you want to center it both horizontally and vertically, try out this answer of a very old question.
Modify it
.logo{
text-align: center;
display:inline-block;
width:100%;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
padding-left: 50%;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}
<div class="logo">
<img src="images/logo_sml.jpg">
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
This is my code i try to align texts name and age to bottom but it does not work
<div class="tiles">
<div id="metro-array">
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff;">
<span style="margin-top:100px">
Name
<span>
Age
</a>
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff;">
name2
Age 2
</a>
</div>
</div>
My Css
.tiles {
font-family:'Lato', Helvetica, sans-serif;
line-height: 28px;
font-size: 16px;
color: #333;
font-weight: lighter;
}
#metro-array a, #downloads a {
font-weight: normal;
text-transform: uppercase;
float:left;
}
}
I tried these for that span
margin-top:100px and `margin-top:-100px`
but it is not working
I have edited your code to accomplish the margin you are aiming for.
http://plnkr.co/edit/VJYpZa76UL06FLlRpRJr?p=preview
I moved all the styles to style.css because it is good practice to separate your CSS from your HTML.
please remove float and display blog and try it.
Love Demo
HTML
<div class="tiles">
<div id="metro-array">
<a class="metro-tile align-top">
<span>
Name
<span>
Age
</a>
<a class="metro-tile align-middle">
name2
Age 2
</a>
<a class="metro-tile align-bottom">
name3
Age 3
</a>
</div>
CSS
.tiles {
font-family:'Lato', Helvetica, sans-serif;
line-height: 28px;
font-size: 16px;
color: #333;
font-weight: lighter;
}
#metro-array a, #downloads a {
font-weight: normal;
text-transform: uppercase;
cursor: pointer;
width: 110px;
height: 130px;
display: table-cell;
background-color: deepSkyBlue;
color: #fff;
}
a.align-bottom{
vertical-align:bottom;
}
a.align-top{
vertical-align:top;
}
a.align-middle{
vertical-align:middle;
}
You can apply the display block style to the element and it should fix the top and bottom margin issue. Before that make correction on your code. close the span tag.
<span style="display:block;margin-top:100px;">Name</span>
If you need it stick to left side or right side of any other inline element, use the float:left or float:right style.
span is an inline element. First make it block or inline-block and then add margin.
In the following SSCCE, I applied a CSS property vertical-align:middle; to the .innerContainer div. It has two spans: one containing the ALPHA BRAVO CHARLIE text, and the other containing the SUBSCRIBE NOW text.
The #firstSpan seems to be vertically aligned in the middle. The #secondSpan doesn't. Why?
JsFiddle here.
I want the #secondSpan span to also be aligned in the middle vertically. How do I do that?
HTML:
<div class="container">
<div class="innerContainer">
<span class="firstSpan">Alpha Bravo Charlie</span>
<span class="secondSpan">Subscribe now</span>
</div>
</div>
CSS:
.container {
margin-bottom:0px;
padding: 0 10px 0 10px;
}
.innerContainer {
background-color: rgb(74, 72, 72);
padding: 30px 10px 30px 10px;
text-align: center;
/* vertical-align: middle; */
}
.firstSpan {
font-family: Oxygen, sans-serif ;
text-transform: uppercase;
font-weight: bold;
font-size: 32px;
color: white;
letter-spacing: 2px;
}
.secondSpan {
margin: 0 40px 0 40px;
padding: 15px;
background-color:green;
text-transform:uppercase;
font-weight: bolder;
font-size: 12px;
letter-spacing: 1px;
}
Screenshot:
The property vertical-align apply to the element itself not to the content, try
.innerContainer > span {
vertical-align:middle;
}
UpdatedDemo
In case your browser window isn't wide enough to show the aligned text, here's the same demo with some of the text taken out.
DEMO
.innerContainer span{ vertical-align: middle;
display:inline-block; }
vertical align make it align like you want and inline-block prevent breaking off subscribe now