I am trying to vertically align my "dropdown arrow" in a naviation menu.
I have tried varioust hings like vertical-align: middle, display: inline-block and stuff like that but that didn't help at all.
http://img02.imgland.net/jfCmDoW.png
The HTML looks like this:
<li>
<a href="#!" data-activates="dropdown1">English
<i class="material-icons">arrow_drop_down</i>
</a>
</li>
I have created a JSFiddle which demonstrates the problem: https://jsfiddle.net/dbwaoLrh/
Explanations of what I am doing wrong there are highly appreciated as I face this issue every time I am using "custom" font sizes using the materialize-framework.
You might have tried various styling to arrange your icons, but you need to target your icons i.e. i tag as below and style,
.footer-links > li > a > i{
vertical-align:middle;
}
Check this two jsFiddle, I have added background to one just for understanding purpose.
https://jsfiddle.net/dbwaoLrh/2/
https://jsfiddle.net/dbwaoLrh/4/
Try this
.material-icons {
vertical-align: 1px; /*Change this to adjust the icon*/
}
Second option is you can use is:
.material-icons {
position: relative;
top: 1px; /*Change this to adjust the icon*/
}
What you are doing wrong
There is css rule for icon: font-size:24px which is greater than the parent anchor element and line height is 1 so resulting line height is 24px; that's why it was not working. If you want you can use your own code just change the line-height equal to parent anchor element and use vertical-align:middle for icon
See Js Fiddle
.material-icons {
display: flex;
align-items: center;
justify-content: center;
}
You should add vertical-align: middle; rule for .material-icons:-
.material-icons {
vertical-align: middle;
}
I know it is an old question, but i find this solutions working better with every line-height:
.material-icons {
vertical-align: middle;
line-height: 1px;
}
I was using font Awesome and to get the exact same Vertical Align with Material Font, I setup this CSS and it aligns perfectly
.material-icons {
vertical-align: middle;
padding-bottom: 3px }
Tested in Firefox, Chrome, InternetExplorer and Edge.
Related
I'm using the latest font-awesome library (4.4) and it seems some icons are not vertically centered or they have different sizes.
Reproduction online
I made a zoom over a font-size: 14px; list here:
Is there anything I'm doing wrong?
.quick-actions i {
font-size: 54px;
cursor: pointer;
color: #999;
vertical-align: middle;
}
.fa:before {
vertical-align: middle;
}
.quick-actions{
border:1px solid #ccc;
display: inline-block;
}
This seems to work...
http://jsfiddle.net/nh1sgw1a/
Edit (I see it really is a problem with fa-commenting-o):
.quick-actions i.fa-commenting-o:before{
font-size:50px;
/*margin-top:-5px;*/
float:left;
}
http://jsfiddle.net/nh1sgw1a/2/
Like said in the comments, they aren't drawn centered in the middle of the horizontal axis of its shape, and that's why they look like being in different heights.
That said, I found this CSS rule useful to place them closer to the middle edge of my buttons/bars (more vertically centered, although not perfect):
i.fa {
vertical-align: middle;
}
Good day,
I wish to vertically center all remaining characters of a word after the first character for mainly using in Headings.
a busy cat http://www.maiocv.com/TEST/stackoverflow.jpg
CSS:
.middletext {
font-size:70%;
vertical-align: top;
line-height: 25%;
}
HTML:
<h1><span>C<span class="middletext">ustomer</span> B<span class="middletext">ilgewater</span></span></h1>
One of the issues I have is that when I use H2, the parent font sizes changes but the middle text isn't correctly aligned.
What can I do, is there a simpler method?
Thanks for any help.
I would change the font size of the first letter rather than the rest of it then you wouldn't need to bother with the line-height:
HTML
<h1>
<span class="capital">C</span><span>ustomer</span>
<span class="capital">B</span><span>ilgewater</span>
</h1>
CSS:
h1 span {vertical-align:middle;}
h1 .capital {font-size:120%;} /* or whatever size you want it to be*/
Example
http://jsfiddle.net/JV8LL/8/
Using this CSS:
span.firstletter { vertical-align: middle; }
.middletext {
font-size: 70%;
vertical-align: middle;
line-height: 25%;
}
Updated your fiddle, basically do it the other way round.
<h1><span class="uppertext">C</span>ustomer <span class="uppertext">B</span>ilgewater</h1>
and
.uppertext {
font-size:150%;
vertical-align: middle;
}
http://jsfiddle.net/JV8LL/11/
http://jsfiddle.net/JV8LL/3/
if you set line-height: 150%; it seems to work well.
Use CSS ::first-letter Selector instead separating first letter to tag. (sorry it have to be block element not inline - span)
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
Using CSS, is there any way to show a div which is there inside an li element? i don't wanna use any javascript for this.
here is my sample code for this.
<ul>
<li id="help">
Help
<div id="helpContainer">
This is the help text content
</div>
</li>
</ul>
CSS
#helpContainer
{
display:none;
}
here it is, i wanna display helpContainer div on click of li(id=help)
As I mentioned in the comments. You can use :target.
Or if you want to go without :target .
#helpContainer{
float: left;
display:none;
position: absolute;
padding-top: 20px;
top: 10px;
}
#help:active #helpContainer{
display: block;
}
#helpContainer:hover{
display: block;
}
I made a little demo for that.
http://jsbin.com/eyavuw/1/
(source code) http://jsbin.com/eyavuw/1/edit
DEMO DEMO2 DEMO3
#helpContainer {
display: none;
}
li#help:hover div#helpContainer{
display: block;
}
li#help:target div#helpContainer{
display: block;
}
jsFiddle DEMO
Here's a CSS3 method that hides Help until it's needed.
To view the hidden Help, click the resize widget seen at the bottom right corner and drag down vertically.
CSS3:
.help{
background-color: lightblue;
width: 200px;
height: 25px;
min-height: 25px;
line-height: 25px;
max-height: 50px;
resize: vertical;
overflow: hidden;
}
.helpContainer {
background-color: yellow;
color: red;
}
CSS is for styling, so, you can use it to manipulate DOM elements, for that, you will need Javascript.
You must use Javascript to manipulate the DOM (Document Object Model) of the page.
This article describes how to use the #anchor tag coupled with the puesdo-class :target CSS selector (http://reference.sitepoint.com/css/pseudoclass-target). This doesn't really do what you want though (you would have to use an anchor tag to hit new # tags to put the page in different states whereas with Javascript you could just assign a listener to the onclick event on the object you actually care about), and I would never use this in practice.
Here's the image in question of my HTML page.
The text menu is inside a right aligned div, and has 1.2em letter spacing.
Is there a pseudo-selector for this? I would not like to have to resort to relative positioning.
I would love the text menu to end where the block ends.
I've already marked the best answer, but I was asked for the markup regardless by CodeBlock. Here it is.
<div class="sidebar">
<span class="menuheader">MENU</span>
<ul>
<li>Content</li>
<li>Attachments</li>
<li>Sub-pages</li>
<li>New sub-page</li>
</a>
</ul>
</div>
.sidebar {
color: rgb(150,93,101);
display: inline;
line-height: 1.3em;
position: absolute;
top: 138px;
width: 218px;
}
.menuheader {
letter-spacing: 1.1em;
margin: -1.2em;
text-align: right;
}
You can set your element to have a right margin of -1.2em, which would counteract the letter spacing.
e.g.
.menu-header-selector {
display:block;
letter-spacing:1.2em;
margin-right:-1.2em;
text-align:right;
}
To answer your question regarding pseudo-selector, there isn't a per character pseudo-selector as far as I'm aware. (EDIT: Scratch that, there's the :First-Letter selector, which Jonas G. Drange pointed out).
EDIT: You can find a basic sample here: http://jsfiddle.net/teUxQ/
I would call this a browser bug, actually. The spec says it's the spacing between characters, while your browser (and mine) seem to be changing the spacing after characters. You should submit a bug report.
Obviously a very old question, but CSS involved for your specific example worked at that time.
It involves to reset direction to the opposite, give a formating context to your inline element and set a negative text-indent equal to the letter spacing.
Demo below:
.sidebar {
color: rgb(150, 93, 101);
line-height: 1.3em;
width: 218px;
border:solid;
text-align:right;
}
.menuheader {
letter-spacing: 1.1em;
direction:rtl;
display:inline-block;
text-indent:-1.1em;
background:gold
}
<div class="sidebar">
<span class="menuheader">MENU</span>
<ul>
<li>Content</li>
<li>Attachments</li>
<li>Sub-pages</li>
<li>New sub-page</li>
</ul>
</div>
You can add an :after of your element and set a minus margin left equal as the letter-spacing
.menuheader {
letter-spacing: 1.1em;
}
.menuheader:after {
content:" ";
margin-left: -1.1em;
}
Tested on Chrome, Firefox and Edge
You cannot target the last character, only the first (CSS3, :first-letter). You can add a span around the last letter, but that would mean adding meaningless markup which is "worse" than adding positioning to the element.
CSS is perfect for trickery like this :)
No need for changing display to any other kind (<p> paragraph example) or actually doing anything unnecessary with my code. Text-indent set to negative letter-spacing value resolves that problem for me.
text-indent: -2em; works exactly as I want for letter-spacing: 2em; and was the only thing I had to add to my CSS.
You could try adding display: block to the text and then reduce the width by using 100% minus the letter-spacing.
.menuheader {
text-align: right;
display: block;
letter-spacing: 1.1em;
width: calc(100% - 1.1em);
}
I think i have the best answer
You can use ::after and set content as the last word of your word
div{
display:inline-block;}
#demo1{border: 2px blue dashed;
text-align: center;
letter-spacing: 3vw;
}
#demo2{border: 2px blue dashed;
text-align: center;
letter-spacing: 3vw;}
#demo2::after{
content:'g';
letter-spacing:0;}
<div id="demo1">something</div><span> ///here after last letter their is a gap</span></br> </br>
<div id="demo2">somethin</div> <span>///here the gap is removed with the help of ::after sudeo class</span>