Is there a way to vertically align just the colon in this line:
<span>text:text1</span>
so that the colon is off the base line and more vertically-centered between the two text words?
Ant help will be appreciated.
You would need to wrap your colon in a span and then set vertical-align on that span.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vertical-align</title>
<style>
p {
font-size:4em;
}
p span{
font-size: 1.5rem;
vertical-align: middle;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>text <span>:</span> text1</p>
</body>
</html>
Thanks for your suggestion.
I used your advice/code, but the colon is still on the baseline. (it actually looks like the text is now higher than the colon)
Any other suggestions will be appreciated.
Well if your going to be nesting the span in a span you need to set up a descendant selector.
I assumed you knew how to handle that.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vertical-align</title>
<style>
p {
font-size:4em;
}
p span span{
font-size: 1.5rem;
vertical-align: middle;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p><span>text <span>:</span> text1</span></p>
</body>
</html>
What you provided worked successfully.Thank you again - much appreciated.
However, I need the provided code to be within the container named box99, which is using display block for the text there, so it all stacks on top of each other on the page.
So, when I add your code into that container the “text” and “:” and “text1” all stack on top of each other, but I’d like that line to not stack, and instead display in one single line. The code below might help with my explanation. (also, I don’t know if this should be a whole new posting, for this help request).
So, my question is how do I keep this line from stacking like this:
text
:
text1
so, that it looks like this text : text1
Any additional help with this is appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.box99
{
margin:4% 0 0 0;
color:#fff;
font-size:55px;
font-weight: 500;
font-family:arial;
}
.box99 span{
font-weight: 500;
display:block;
line-height: 95%;
}
</style>
<style>
p {
font-size:4em;
}
p span span{
font-size: 1.5rem;
vertical-align: middle;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box99">
<div class="container text-left">
<span>text One </span>
<p><span>text <span>:</span> text1</span></p>
<span>text Three</span>
</div>
</div>
</body>
</html>
This will target any span inside of box99 and make it display block.
That doesn’t make much sense. Why not use divs (or a more semantic block element) if you want blocks?
The best setup depends on context, which we don’t see with dummy content.
It may be a case of applying a class to the span around the colon, or a parent, as the current selector (p span span) is a bit too unspecific for me, a class would be better IMO.
I also don’t see the purpose of the first spans in the p.
1 Like
That looks like it was pasted in from my second example. When I didn’t know what the OP’s html looked like yet.
Now that I see what your doing, you just need to be using p tags as they are block by default.
Then you can use spans where you need them.
Also, if your not aware you can fine tune vertical-alignment with a numeric value in place of the keywords.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vertical-align</title>
<style>
p {font-size:4em}
p span{
font-size: .75em;
vertical-align: .125em;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box99">
<div class="container text-left">
<p>text One</p>
<p>text <span>:</span> text1</p>
<p>text Three</p>
</div>
</div>
</body>
</html>
1 Like
Thanks again for all the help. Greatly appreciated.
The reason I went with <span instead of <p originally was that when the lines stack on top of each other they are more closely stacked together. The <p tag creates too big of a gap between:
text One
text:text1
text Three
Can you suggest a solution to lessen (or remove) that stacked gap?
Much thanks again.
p tags have a default margin that gets supplied by the browser unless you reset it.
p {
margin:0; /*or whatever you choose*/
font-size:4em;
}
As far as the generic spans set up as descendant selectors in my example. I always assume that people with a basic knowledge of CSS know how to convert those to a classname.
3 Likes
Much thanks again
I added
margin:0;
as instructed, but it only reduced the lower gap.
So, I’m now trying this without success, which means there are still stacked gaps like so:
text One
text:text1
text Three
but I’d like:
text One
text:text1
text Three
Here’s my attempt:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
p.text-1 {
margin:0;
font-size:19px;
font-weight: 100;
font-family:Arial;
color:#ffffff;
}
p.text-2 {
margin:0;
font-size:55px;
font-weight: 800;
font-family:Arial;
}
p.text-2 span{
font-size:55px;
vertical-align: .04em;
color: red;
font-weight: bold;
}
p.text-3 {
margin:0;
font-size:19px;
font-weight: 100;
font-family:Arial;
color:#ffffff;
}
</style>
</head>
<body>
<div class="box99">
<div class="container text-left">
<p class="text-1">text One</p>
<p class="text-2"><span>text <span>:</span> text1</span></p>
<p class="text-3">text Three</p>
</div>
</div>
</body>
</html>
Any additional help will be apprecaited
You do have a default line-height on that 55px font-size that plays a role in the spacing.
When stacked between two strings of text at 19px font-size it appears as margin, but it’s not.
Default line-height is 1.2 or 1.3 if I remember correctly, That is so it allows space for text ascenders and descenders. Such as a “T” or a “j”
You can cheat it down but I wouldn’t go too small for the reasons I just mentioned along with text that might wrap to a new line. If you go too small you would see wrapping text layered on top each other.
p.text-2 {
margin:0;
line-height:.8;
font-size:55px;
font-weight: 800;
font-family:Arial;
}
Here is a screenshot of .8 with some extra text that I forced to wrap by reducing my browser window.
As you can see the capital T has the potential of overlapping a lower j.
EDIT:
Actually it’s starting to overlap at line-height:1 on all p tags
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background:#333;
}
p.text-1, p.text-3 {
margin:0;
line-height: 1;
font-size:19px;
font-weight: 100;
font-family:Arial;
color:#ffffff;
}
p.text-2 {
margin:0;
line-height: 1;
font-size:55px;
font-weight: 800;
font-family:Arial;
}
p.text-2 span{
font-size:55px;
vertical-align: .04em;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box99">
<div class="container text-left">
<p class="text-1">text One Textj Textj</p>
<p class="text-2"><span>text Tjxtj <span>:</span> textj Textj</span></p>
<p class="text-3">text Three Textj Textj</p>
</div>
</div>
</body>
</html>
It looks like 1.1 would be the minimum on text2 and 1.0 on text1&3
p.text-1, p.text-3 {
margin:0;
line-height: 1;
font-size:19px;
font-weight: 100;
font-family:Arial;
color:#ffffff;
}
p.text-2 {
margin:0;
line-height: 1.1;
font-size:55px;
font-weight: 800;
font-family:Arial;
}
1 Like
This working page compares
(1) @ChrisjChrisj + @Ray.H with span around text enclosing another span around the colon.
(2) @Ray.H + @ronpat with span around colon only as suggested by @SamA74.
The only change is the line with the colon.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>vert-align colon 4</title>
<!--
https://www.sitepoint.com/community/t/how-to-vertically-align-a-colon-with-text/294657/5
ChrisjChrisj
Example code by Ray.H + ronpat
-->
<style>
body {
background:#333;
}
p.text-1,p.text-3 {
color:#eee;
line-height:1;
font-size:19px;
font-weight:100;
font-family:Arial;
margin:0;
}
p.text-2 {
/* line-height:1; /* TEST line-height. pick one and enable it. */
/* line-height:1.1; /* TEST line-height */
/* line-height:normal; /* TEST line-height; normal is the default */
font-size:55px;
font-weight:800;
font-family:Arial;
margin:0;
/* outline:1px dashed lime; /* TEST Outline */
}
p.text-2 span {
color:red;
vertical-align:.04em;
font-weight:bold;
/* outline:1px dashed yellow; /* TEST Outline */
}
.text-4 {
color:red;
/* line-height:1; /* TEST line-height; pick one and enable it. */
/* line-height:1.1; /* TEST line-height */
/* line-height:normal; /* TEST line-height; normal is the default */
font-size:3.4375em; /* em instead of px */
font-weight:800;
font-family:Arial;
margin:0;
/* outline:1px dashed lime; /* TEST Outline */
}
.text-4 span {
line-height:1;
vertical-align:0.064em;
/* outline:1px dashed yellow; /* TEST Outline */
}
</style>
</head>
<body>
<div class="">
<div class="">
<p class="text-1">text One Textj Textj</p>
<p class="text-2"><span>text Tjxtj <span>:</span> textj Textj</span></p>
<p class="text-3">text Three Textj Textj</p>
</div>
</div>
<hr> <!-- TEMP divider for test purposes -->
<div class="">
<div class="">
<p class="text-1">text One Textj Textj</p>
<p class="text-4">text Tjxtj <span>:</span> textj Textj</p>
<p class="text-3">text Three Textj Textj</p>
</div>
</div>
</body>
</html>
Have you ever taken an introductory HTML/CSS class?
When posting a question, please adhere to our repeated requests for a working page that demonstrates the problem along with your verbal problem description.
Why do you think that request does not apply to you???
Forum guidelines:
https://www.sitepoint.com/community/faq#civil
Forum POSTING BASICS:
Forum Posting Basics
Thanks for all the help.
The line height 1 worked well - thanks again.
However, currently I’m trying figure out why the text is lined up like this:
text One
__text:text1
text Three
with the text:text1 not lined up fully to the left. (I had to add __ to show what I mean).Any ideas will be appreciated.
Regarding, providing a working page, and the rules, I’ve read the rules, they seem fairly flexible, and believe I’m following them by providing a working example, for example
<!doctype html>
<html lang="en">
<head>
<body>
.....
.....
......
</body>
</html>
I don’t want to provide a link, because that would appear in searches forever. I’m providing a working example, as I have for years, and never have been told I’m not following the rules. I’m doing the best I can do, as I’m learning as I go, and always have appreciated all the help I’ve received at sitepoint. Much, much thanks again.
Using the code which @Ray.H provided, I don’t see the misalignment issue you are reporting, so you’ll need to post the code you have which demonstrates the problem. I’m guessing there must be another CSS rule on your page which is conflicting here, but without the code, guess is all I can do.
1 Like
First, when you copy my latest working page to a file and open that file in your browser, do both groups of text align to the left or to the right? (easy one word answer requested)
I assume that you are then selectively copying and pasting the code from the working page into your code-in-progress which is when you see the text not fully left aligned.
Is that correct?
I apologize, but it seems necessary to say…
Left is on this side…Right is on this side.
Here’s the thing. There is nothing in the working page that would prevent the text from being left aligned. If it is not left-aligned, then you are describing YOUR code, because there is something in your code that we do not know about because you have not shown it to us.
I am seriously trying to explain why it is important to provide a working page that contains all relevant code and demonstrates the problem. It takes a few additional minutes on your part to create the working page but it simplifies our understanding of the issue tremendously.!!!
The instructions again:
(1) copy the working page to a file. Open the working file in you browser. Describe how the text aligns (or make a screen shot)
(2) if you are selectively copying any of the code into your code (that has more code in it than we know about), tell us so! and capture another screen shot. and maybe even another working page with all of your relevant code.
Please.
Please try this working page. BOTH Ray’s and my text should be right-aligned. All I did was add the class text-right {text-align:right} to the parent boxes, the upper example has the class in the outer box, the lower example has the class in the parent box. Both properties are inherited by the paragraphs and right aligned.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>vert-align colon 4</title>
<!--
https://www.sitepoint.com/community/t/how-to-vertically-align-a-colon-with-text/294657/5
ChrisjChrisj
Example code by Ray.H + ronpat
-->
<style>
body {
background:#333;
}
p.text-1,p.text-3 {
color:#eee;
line-height:1;
font-size:19px;
font-weight:100;
font-family:Arial;
margin:0;
}
p.text-2 {
/* line-height:1; /* TEST line-height; pick one and enable it. */
/* line-height:1.1; /* TEST line-height */
/* line-height:normal; /* TEST line-height; normal is the default */
font-size:55px;
font-weight:800;
font-family:Arial;
margin:0;
/* outline:1px dashed lime; /* TEST Outline */
}
p.text-2 span {
color:red;
vertical-align:.04em;
font-weight:bold;
/* outline:1px dashed yellow; /* TEST Outline */
}
.text-4 {
color:red;
/* line-height:1; /* TEST line-height; pick one and enable it. */
/* line-height:1.1; /* TEST line-height */
/* line-height:normal; /* TEST line-height; normal is the default */
font-size:3.4375em; /* em instead of px */
font-weight:800;
font-family:Arial;
margin:0;
/* outline:1px dashed lime; /* TEST Outline */
}
.text-4 span {
line-height:1;
vertical-align:0.064em;
/* outline:1px dashed yellow; /* TEST Outline */
}
.text-right {
text-align:right;
}
</style>
</head>
<body>
<div class="text-right">
<div class="">
<p class="text-1">text One Textj Textj</p>
<p class="text-2"><span>text Tjxtj <span>:</span> textj Textj</span></p>
<p class="text-3">text Three Textj Textj</p>
</div>
</div>
<hr> <!-- TEMP divider for test purposes -->
<div class="">
<div class="text-right">
<p class="text-1">text One Textj Textj</p>
<p class="text-4">text Tjxtj <span>:</span> textj Textj</p>
<p class="text-3">text Three Textj Textj</p>
</div>
</div>
</body>
</html>
Screen shot of the latest working page:
Just so ya know… Links posted in these messages are No Follow. They will not appear in searches.
1 Like
I feel like I need to clarify something here. A single span around the colon only was my intention all along, as shown in my first reply in post #2.
In post #3 when Chrisj stated that it didn’t work I knew it was being nested in another span which is unnecessary. (But it is possible that there could be some crazy situation where it could happen.)
The html I posted in post #7 with a single span is what I envisioned all along, as it is all that is necessary.
<div class="box99">
<div class="container text-left">
<p>text One</p>
<p>text <span>:</span> text1</p>
<p>text Three</p>
</div>
</div>
Then when Chrisj stated that it didn’t work again in post #10.
I copied the code he posted and I did not realize the nested spans had worked their way back in there AGAIN, as I had previously removed the wrapping span.
The single span around the colon only is what I had suggested and have been advocating since my first reply.
Just say NO to nested spans, one span is all that is needed to vertical align one little colon 
3 Likes
Or, if you don’t want a colon, don’t use a colon.
<big>E :</big> vs. <big>E ꞉</big>
E : vs. E ꞉
6 Likes
꞉
I’d go for that, I wasn’t aware of it. A quick google search calls it a “modifier letter colon” and it automatically aligns vertically. What more could you ask
We better stay away from the <big> tag though as it is now obsolete
<span>꞉</span> …should do it without needing any extra styles
EDIT:
Actually we don’t even need the span now
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Span Again</title>
<style>
body {
background: #333;
}
p.small {
margin: 0;
line-height: 1;
font-size: 19px;
font-weight: 100;
font-family: Arial;
color: #ffffff;
}
p.big {
margin: 0;
line-height: 1.1;
font-size: 55px;
font-weight: 800;
font-family: Arial;
color: red;
}
</style>
</head>
<body>
<div class="box99">
<div class="container text-left">
<p class="small">text One Textj Textj</p>
<p class="big">text Tjxtj ꞉ textj Textj</p>
<p class="small">text Three Textj Textj</p>
</div>
</div>
</body>
</html>
2 Likes
<off topic>
Interesting, the <small> tag has been repurposed in html5
In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.
So what I gather from that, is that the small tag now has a bit of semantic meaning to it (maybe similar to <aside>). When it was previously used for presentation only in html4.
5 Likes