As my jsfiddle shows, I am trying to move the span tag further down so that the rest of the paragraph text can stand in the middle of it.
https://jsfiddle.net/9r81ry8c/1/
html:
<div>
<p> This <span>is</span> awesome </p>
</div>
css:
span{
font-size: 60px;
transform: translateY(-20%);
}
An example is the same when we put a horizontal line in the middle of text where it looks like: - This -. Well obviously in my case, the lines are now text paragraph.
How can I move the span tag to the vertically down to achieve this?
CSS vertical-align property is for exactly this situation:
span{
font-size: 60px;
vertical-align:middle;
}
p {
display: inline-block; /* see edit below */
}
https://jsfiddle.net/9r81ry8c/14/
Your "is" is now larger than the other text so by setting this text to "middle" causes the other text by implication to also be centred on the horizontal axis.
A possible side effect of this is that the centreing is not done with the visible height of the letters but with the size of the letter glyph, so you will notice that perhaps the i of the is is not in line but it is in line as a glyph box, even though the letter may not fill that glyph box.
EDIT:
It is worth noting that vertical-align will only apply to inline,
inline-block or inline-table elements. So if your vertical alignment isn't working check / confirm that the element you are aligning (its immediate parent such as your <p> in your example) is set to one of these display types, listed above.
A very good read about Vertical align can be found here.
try vertical-align prop like below
span {
font-size: 60px;
vertical-align:middle;
line-height:1;
}
p {
vertical-align:middle;
line-height:1;
}
Display as inline-block for span. span tag further down from p tag so for that you need to change your translate value from minus(-) to plus(+)
span{
font-size: 60px;
transform: translateY(20%);
display:inline-block;
}
<div>
<p> This <span>is</span> awesome </p>
</div>
You can use CSS transform only on an element whose layout is governed by the CSS box model.
Here your updated jsfiddle
So to use transform, first you need to use a positive value then you must set display: inline-block for youe [span].
To be fully compatible I suggest you to add even Safari and IE syntax
span{
font-size: 60px;
display: inline-block;
-ms-transform: translate(10%); /* IE 9 */
-webkit-transform: translate(10%); /* Safari */
transform: translateY(10%); /* Standard syntax */
}
I have modified your style check this.
span{
font-size: 60px;
vertical-align: middle;
}
working fiddle link - https://jsfiddle.net/9r81ry8c/7/
Related
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.
https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size. Now, since it's floating, the text is centered.
Is there any way to align the text so that the baseline of the Title and the <a> element is the same?
You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2. Create a span inside the link
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
}
.cl span {
line-height: 1;
vertical-align: bottom;
}
h2 {
border:1px solid #ff0000;
}
<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>
So, The following code seems to work:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-heights
JSFiddle: https://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.
Pretty simple question, but I am not sure if it is possible. I want to add an image to act as a bullet in all <h1> elements. I know I can achieve this by:
<span class='bullet'></span><h1>My H1 text here</h1>
with css:
.bullet{
background: url('bullet.png') no-repeat;
display:inline-block;
vertical-align: middle;
background-size:100%;
height:25px;
width:25px;
margin-right: 5px;
}
but is there an automatic way to do the same thing? I was thinking something like:
h1{
list-style-image: url('bullet.png');
}
but that only seems to work with <ul> elements. I really don't want to have to paste the <span> element everywhere before the <h1> element. Any ideas?
While you can use a :before pseudo-selector to add a "-" or "•" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!
To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display of that element to list-item. Optionally, you can also set list-style-type (default : disc) and list-style-position (default : outside) attributes to modify the behavior / look-and-feel of your list item.
If your element spans multiple lines, list-style-position should be the default value outside if you want all of your lines to align to the right of your bullet point. In that case, however, it is possible you don't see your actual bullet point, as it would be to the left of the content of your element. If this happens, you can just add a left margin to move the element's content to the right, and your bullet point should show up.
EXAMPLE 1
h1 {
display: list-item; /* This has to be "list-item" */
margin-left : 1em; /* If you use default list-style-position 'outside', you may need this */
}
<h1>
Your H1 text should go here. If it consists of multiple
lines, the left alignment of all lines is the same.
</h1>
<h1>
Here's another item.
</h1>
EXAMPLE 2
h2 {
display: list-item; /* This has to be "list-item" */
list-style-type: square; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type */
list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}
<h2>
Your H2 text should go here.
</h2>
<h2>
Note that, if you have multiple lines, only the first
line is aligned to the right of the bullet point when
using list-style-position 'inside'. Subsequent lines
are left aligned with the left of the bullet point.
</h2>
You could do something like this:
h1:before {
content:"• ";
}
See Fiddle :
http://jsfiddle.net/6kt8jhfo/6/
You can use pseudo-selector :before to add anything what you want before your tag.
h1:before {
content: "- "
}
<h1>My H1 text here</h1>
Give a class name to the paragraph or any element and apply the below code
(I have given class name as bullet):
.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
Something like this should work
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}
If you want to adjust dot size, color and position you can do this:
.bullet:before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
display: inline-block;
background-color: #29cf00;
vertical-align: middle;
}
list-style-type is reserved for ul only.
You can use <h1 class="bullet"> with pseudo-element :before.
The very simple way to create a bullet using the before css is to utilize the font family ... this way there is no need to include any graphics and etc.
here is the class code:
.SomeClass:before {
font-family: "Webdings";
content: "= ";
{
Nope, list-style and list-style-image are only for ul and ol tags you'll have to get back to your first method or make something with js
http://www.w3schools.com/css/css_list.asp
http://www.w3schools.com/cssref/pr_list-style-type.asp
Just use
<p>• </p>to create a dot in front of your word
I have the following code
HTML:
<div>
<h3> Lorem ...</h3>
<a>some link</a>
</div>
CSS:
a {
float: left;
}
h3 {
display: inline-block;
}
If there is enough horizontal space both elements sit nicely next to each other, but if not enough space, the anchor is pushed down (not what I want) I would like to see the h3 element's text wrap instead. Furthermore, the text inside the elements can be anything, meaning that their width is variable. Any suggestions ?
JSFIDDLE
either
h3{
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
or give them widths
h3{
width:50%;
}
a{
width:50%;
}
or whichever values u want so that they won't get out of their boundries
I don't exactly understand how you want the output to be, i've given two outputs below.
1) <h3> and <a> tag side by side without width:
You can use display:table property which requires no width
DEMO
CSS:
div
{
display:table;
}
a {
display:table-cell;
}
h3 {
display: table-cell;
}
2) <a> tag continuing with the text in the <h3> tag:
You can use display:inline
DEMO
CSS:
a {
display:inline;
}
h3{
display:inline;
}
float doesn’t work this way on elements higher up in the DOM tree. (The only reason that the link did not get pushed down under the text content of the h3 to begin with was that you did display the latter as inline-block.)
If you can place your link before the h3, then it’s easy (you just have to remove inline-block form the h3 as well) – http://jsfiddle.net/ygnbgL7k/9/
EDIT:
[ from comment]: but the only problem with that solution is that the wrapped text starts at the beginning of the next line (under the floated anchor).
If you don’t want that, add
h3 { overflow:hidden; }
http://jsfiddle.net/ygnbgL7k/15/
h3{
white-space: nowrap;
overflow: hidden;
}
I have HTML as shown in http://jsfiddle.net/Lijo/LLq3v/1/
I need to put the following two div contents in one line.
Tax Report 1
: Frequency - Weekly
Though I have put a inline display, it is coming in two lines. What is the missing point here?
Making the container div inline will not create the effect you want. That will cause the container itself to act as an inline element see http://www.tizag.com/cssT/inline.php.
The best way to create the effect you want would be to float the inner divs to the left. Provided that they are narrower than the container then they will sit next to each other.
Making divs inline is usually frowned upon in web development however as commented below there are exceptions. This is from a post on a similar topic
<!-- An inline div is a freak of the web & should be beaten until it becomes a span
(at least 9 times out of 10)... -->
<span>foo</span>
<span>bar</span>
<span>baz</span>
<!-- ...answers the original question... -->
found here. Spans exist for a reason.
To float the div's left modify your CSS to be:
.reportTitle
{
font:bold 10pt Arial;
float: left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}
But I would recommend replacing the divs with spans.
Try this fiddle update
.reportTitle
{
font:bold 10pt Arial;
float:left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}
You have made the container an inline element, but the inner elements are still block elements, so they are displayed one below the other. Make the inner elements inline instead.
Demo: http://jsfiddle.net/LLq3v/5/
You can also use display: inline-block if you need to preserve the ability to set width or height. Oh, and I got a nice underline.
http://jsfiddle.net/4yqJ8/
.reportTitle {
display:inline-block;
}
.reportFrequency {
display: inline-block;
}
Use spans instead of divs for .reportTitle and .reportFrequency . http://jsfiddle.net/LLq3v/7/
If you want something to behave like an in-line element then you shouldn't code it as a div, you should instead use an inline element. Inline Elements on MDN . It's true that you can use css to do all the work, but there are reasons not to go that way
You're making life unnecessarily difficult for yourself
You're making the html less semantic, ie: a complete pain to interpret on it's own.
Also, if you want to make sure they always stay on one line, even when the parent container is too narrow, you can give it the value, white-space: nowrap
You have to set display:inline to elements which you want to be displayed inline, not the container element.
In your case, that would be .reportTitle and .reportFrequency, but not .repeaterIdentifier, which is the container element.
.reportTitle
{
font:bold 10pt Arial;
display: inline; /* HERE */
}
.reportFrequency
{
font:normal 10pt Arial;
display: inline; /* HERE */
}
.repeaterIdentifier
{
border-bottom:1px solid #A7A7A6;
margin: 0 0 5px 0;
display: inline /* This can be removed */
}
Live demo: jsFiddle
I am trying to get a background color to stick strictly to the text of the heading and not span the entire width of the page. I understand that block level elements take up the entire width of the page, so I was wondering if there was a way around this besides forcing inline styles.
EDIT: If I were to use display: inline-block; why is it that even though I specify text-align: center; my headers are still left aligned? Should I use a float instead?
Or displaying as an inline-block could meet most use cases:
h1 {
background-color: red;
display: inline-block;
}
Perhaps something like this:
In HTML:
<div id="Heading">
<span id="HeadingText">HEADING TEXT</span>
</div>
In CSS:
#Heading
{
/* Formatting of full heading */
}
#HeadingText
{
/* Formatting for just heading text */
background-color: #00ff00;
}
Guessing from your question, this isn't the answer you are looking for, but it may be useful.
EDIT:
Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?)...
<h1 style="background-color:#660000; display:inline;">Heading<h1>
This would solve this problem I think:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
And your css would be:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}
You must specify the text-align:center; attribute to the parent element containing your div block to center your header and its background with display:inline-block;