I'm trying to get lines to surround an h1 but I'm having problems aligning the text with the surrounding lines. I've used embedded before / after attributes but I couldn't get them to work in Gmail so I opted of an inline attribute using borders on the h1. Currently the text "January 2018" is aligning below the surrounding lines. See code below.
h1 {
text-align: center;
color: #ffe800;
font-family: proxima-nova, sans-serif;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
}
<h1 style="border-left: 150px solid #ffffff; border-right: 150px solid #ffffff; height: 3px; display: block;">January 2018</h1>
Thanks!
I think you need to change your display property from display:block to display:inline
Related
My link wraps to the second line when it's to long to fit. The problem is that it's not vertically aligned with the first word. How can I do that?
color: #353748;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 10px;
text-indent: 10px;
text-decoration: none;
How it looks like.
It may be fault of the indentation and you may be able to fix it by getting rid of text-indent and putting some horizontal margin if the text is too wide.
How to align the text within an h1 box to the bottom of it.
<h1 class="woocommerce-products-header__title page-title">All</h1>
Here's the current css:
h1.woocommerce-products-header__title, h1.entry-title {
font-family: 'Noe Display Bold', Times, serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 3px;
border-bottom: 1px solid #000;
padding-bottom: 7px;
line-height: 1;
}
h1.entry-title {
text-transform: none;
}
I am inspecting using Chrome Version 81.0.4044.92 on Ubuntu.
Looks like you are seeing the line height. So your fix might be: line-height: 1.
But when your H1 will wrap long texts this will result in unreadable text.
(I assume you checked the bottom padding)
Lately I've been working with Japanese text, and I've found a rather annoying property. In Japanese, unlike English, glyphs do not extend below the text baseline. This example should show what I mean:
div {
font-size: 72pt;
display: inline-block;
text-decoration: underline;
border: 1px solid red;
margin: 10px;
text-align: center;
}
<div lang="ja">日本語</div>
<div lang="en">English</div>
Notice how the "g" in "English" extends below the underline, but none of the characters in 日本語 do. This is typical of Japanese text. Despite this, space is still reserved below the underline, and in fact on my screen the Japanese text reserves more space than the English text does. My question is this:
Is there a way to remove this space with CSS which is reliable across changing fonts and font sizes? I can see at least two possible approaches:
Remove the space below the baseline directly.
Move the baseline to be at the bottom of the containing box.
You need to reset the line-height so it's not bigger than 1. The initial value is normal which depends on the User Agent of the browser, on the font-family and on the font-size, but it's some number between 1 and 1.2 in general. Here's more information if you're interested.
div {
font-size: 72pt;
display: inline-block;
text-decoration: underline;
border: 1px solid red;
margin: 10px;
text-align: center;
line-height: 1;
}
<div lang="ja">日本語</div>
<div lang="en">English</div>
Just set the line height to the same size as the font size: line-height: 72pt. This normalizes the space that's taken for the font height. Of course you can take every value for the line height that you like, to adjust that space. More information to line-height at MDN.
div {
font-size: 72pt;
line-height: 72pt;
display: inline-block;
text-decoration: underline;
border: 1px solid red;
margin: 10px;
text-align: center;
}
<div lang="ja">日本語</div>
<div lang="en">English</div>
i have this behavior:
Why the text have that space?
My goal is to left align the text with that one below.
Here what i have done:
CSS
.btn-basic {
font-size: 5.8em;
white-space: nowrap;
border: medium none;
}
.btn-basic p {
font-size: 0.3em;
line-height: 1.0em;
white-space: nowrap;
}
HTML
<div class="btn-basic">
FREE WI-FI
<p>Gratis. Senza limiti. Anche in streaming.</p>
</div>
Because character glyphs have space around them so they don't butt up against other character.
See:
span {
font-size: 144px;
color: white;
background: #000;
font-family: sans-serif;
}
<span>F</span>
<span>G</span>
<span>FG</span>
That 'space' may be different for each glyph (and font family). Combine that with the font-sizing you are using and you get the effect you are currently experiencing.
Unfortunately, there is very little you can do about it.
I'm working on my site and i want there to be an horizontal line by the right side of the page headers. Currently this is the code for my header, stripped css.
#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}
Alongside:
<div id="newhead"><?php the_title(); ?></div>
But for some reason i cant get the lines to show by the side of the header text.
Please help. http://jsbin.com/ILOlivI/1/edit
I think I would use a background-image in the header row that is overwritten by a background-color of the text. Something like this:
<div id="newHead"><div>the header text</div></span>
#newHead {
background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
}
#newHead div {
background-color: white;
display: inline-block;
padding-right: 10px;
}
Here's a jsfiddle example: http://jsfiddle.net/mVqY6/
This will only work if the text is not too long and if the text is positioned over the background image. In that case you'll need to do some tweaking.
If you are trying to put in a horizontal line level with the mid-line of the text, border-bottom is not really going to work is it?
Off the top of my head I would be using a single pixel .gif image stretched to 100% of the remaining space and aligned to the middle of the text... or if you want pixel perfect alignment to a specific text size, use a 1px wide .gif that has your line in it, plus x number of transparent pixels below.
You could introduce an SVG line, or float a DIV beside your text that is half height, with a border top or bottom. The DIV solution would probably make the most sense if you want to stay in pure CSS/HTML.