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)
Related
I've got 2 <div>s that each gather their text from some JS that I've written.
But I want the end-result to look like in the following image. And I can't figure out how to do that.
I can consolidate them into a single but then I have the issue of needing to apply two different weights to a single <div>, which also wracks my brain.
So basically I want text with 2 different font-weights to be underlined with no interruption.
I've tried the following, and a lot of googling:
div.parentDiv {
text-decoration-line : underline;
}
Is this what you are after?
div {
font-weight: 700;
text-decoration: underline;
}
div span {
font-weight: 400;
}
<div>
Good Reviews
<span>(30)</span>
</div>
Its hard to know with your current question, could you add your HTML and JS so we can see the whole example.
I guess you wanted to both the div text to be underlined.
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
.parent {
display: flex;
flex-direction: row;
text-decoration: underline;
font-weight: 600;
}
.child1 {
color: red;
}
.child2 {
color: green;
}
<div class="parent">
<div class="child1">Good Reviews</div>
<div class="child2">(30)</div>
</div>
However to achieve the result you want you can use .
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
.child1 {
text-decoration: underline;
}
<div>
<span class="child1">Good Reviews (30)</span>
</div>
It can be done by making the underline apply to both the .parentDiv and to its child <div>s, as in this example:
div.parentDiv,
div.parentDiv>div {
text-decoration-line: underline;
}
div.div1 {
display: inline-block;
font-weight: bold;
}
div.div2 {
display: inline-block;
}
<div class="parentDiv">
<div class="div1">
Good reviews
</div>
<div class="div2">
(30)
</div>
</div>
Note that in some browsers the underline may not cross through the bottom of the parenthesis the way it does in your example image. If you absolutely need that, then that can't easily be achieved using regular text formatting CSS; you'd need to add extra elements (or pseudo-elements) with custom border formatting.
To style the two parts individually you need to have at least one of them in its own element.
This snippet wraps the parts in spans and puts the underline under the whole containing element.
Note that to get a continuous underline like in the image given in the question you need to set underline position as well, otherwise, in some browsers, there will be a break in the line when it comes across a descender (in this case the brackets).
If you need the line to cut across the descenders in all browsers you will need to abandon underline and paint in the line using linear-gradient background on the containing div.
div {
text-decoration: underline;
text-underline-position: under;
}
span:nth-child(1) {
font-weight: bold;
}
<div><span>Good Reviews</span><span>(30)</span></div>
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.
I have a single line with 1 icon and 2 pieces of text - I would like to display the right-most piece of text on the far right of the line, with the other items aligned left.
I'm trying to keep the code as lean as possible so I'd like to see if this can be done without using floats, without wrapping each <p> in a <div> of its own and also without JS (which is why I couldn't find an appropriate answer from similar questions asked on here).
Here's the JSFiddle, I'd like to have the word Break displayed on the far right of the line and have the task take up the rest of the width of the containing div:
http://jsfiddle.net/2w1cu71e/
Thank you in advance for any help you might be able to give me, I'm finding it a bit hard to find definitive resources on CSS best practices (aside from CSS Tricks!).
Ines
You only need to add position:absolute;right:0; to .task-category but this markup might be made far simpler if you don't have a reason to be using the <p> elements at all.
All-in-all, I don't see the difference to using a float. There's also the question as to why the <p> is an inline-block but you have your reasons.
I think using <p> tag there doesn't make sense, <span> would be better for doing the job. For the layout I think CSS table table-row table-cell can be a good option over flexbox, and it works on all browsers.
DEMO: http://jsfiddle.net/2w1cu71e/1/
#done {
display: table;
width: 100%;
}
.desc-single-line {
display: table-row;
}
.desc-single-line i,
.desc-single-line span {
display: table-cell;
}
.desc-single-line i {
width: 20px;
}
.desc-single-line span {
font-size: 0.8em;
font-family: 'Open Sans', sans-serif;
}
.desc-single-line .task-category {
color: red;
text-align: right;
}
can you try this instead of the CSS provided? For some reason it doesn't work on jsfiddle but it works just fine on a local html file.
.desc-single-line {
display: flex;
flex-direction: row;
}
.task-category{
color:red;
text-align: right;
flex: 2;
}
.desc-single-line p{
font-size: 0.8em;
font-family: 'Open Sans', sans-serif;
}
http://codepen.io/maxwbailey/pen/nxaFr
I'm trying to get the text to center vertically. This is only important when there is white space (I.E. when the auto height would be less than min-height). How can I accomplish this? I've seen this question asked several times, but none of the answers I've yet found apply to my application.
Thanks! ^_^
Given the fact that you've set a min-height of 75px, you can just add padding of half that to the top and bottom of the text, like so:
.warning {
display:block;
font-family: sans-serif;
font-weight: bold;
padding: 32.5px 0;
/*vertical-align: middle;*/
}
.warning needs to be display: block; to accept padding, but those are the only changes that are necessary to accomplish your objective, I think. Check it out: http://codepen.io/maxwbailey/pen/qcvre
EDIT
If you want to keep the text centered until the container gets small enough that it fills the min-height, you need to use display: table-cell, like so:
.warning {
display:table-cell;
font-family: sans-serif;
font-weight: bold;
vertical-align: middle;
height: 75px;
}
http://codepen.io/maxwbailey/pen/dwfar
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>