In Chrome, on a paragraph element,
text-align: justify;
works fine and creates a block alignment, but has no effect in Firefox or Safari. Any suggestions?
Set the white-space property to pre-line. It will force to collapse into a single whitespace and the text will wrap on line breaks. This will help to block align:
white-space: pre-line;
Posting in behalf of the OP who posted the answer in comment
I believe I solved the problem:
white-space: pre-wrap;
was interfering so I used
white-space: unset;
to solve the issue.
On paragraph element or <p> is block label element but DTD says it's contain inline element. If text-align: justify not working you have to check your browser user agent stylesheet. If p is display: block / inline-block; then text-align: justify; will work.
P{
display: block; /* inline-block; */
text-align: justify;
}
It will solve your Firefox and Safari issue.
Related
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/
I have a KnockoutJS template that creates a input[type=text] and a select next to each other with no <br/> inbetween. However it puts a linebreak between even with white-space: nowrap; I'm currently testing in chrome.
CSS:
table.grid tbody tr td {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
white-space: nowrap;
vertical-align: top;
}
Question: Why isn't white-space: nowrap; not working? Is there a fix to this or a way around it?
As noted above, this may be due to either/both your input and/or select elements being set to display at block level using display:block which will force them onto a 'new line' instead of displaying inline and following through with the anticipate nowrap behaviour
Demo Fiddle
I had a div inside my td. Inside the div had 2 button. Even with white-space:nowrap, display:inline-block and position:relative applied to all these elements it did still wrapped.
For me what did the trick was removing a float:left that was being applied to the buttons, from another class, since it "kind of force" the browser to act as those elements were display:block.
I’ve created an element a h4 element which the :before pseudo element to insert an icon font (generated at IcoMoon). The h4 element is set to text-align: center; and the icons are set to display: block; so that they also center. Perfect!
The problem is in IE8. The h4 elements are centered but the icons inserted using :before are left-aligned. I’ve tried giving the before element a text-align: center property and I also tried applying:
display: block;
width: 80px;
margin: 0 auto;
Now I don’t know what to try next. Here is the code for the icons:
[class^="ico-fonts-"]:before,
[class*=" ico-fonts-"]:before {
font-family: #icoFont;
font-style: normal;
speak: none;
font-weight: normal;
line-height: 1;
}
Any suggestions would be appreciated! :-)
So I found the answer to my own question and it’s this:
Internet Explorer 8 treats the content generated by the :before and :after as outside of the element.
However, all other browsers (except IE7) treat the content generated by the :before and :after pseudo-elements as part of the element.
So I simply had to write:
.ico-fonts:before {
text-align: center~"\9";
}
Have you tried adding zoom:1 yet? Fixes a lot of IE8 CSS quirks.
Any ideas why?
http://jsfiddle.net/FHUb2/
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
}
Edit
Delete
Apart from the reason that text-indent doesn't works on inline elements. another reason is if your element or one of its parent has been set with text-align:right
So make sure your element has been set with text-align:left to fix this.
text-indent does not work on inline elements and <a> is an inline element so you can define display:block or display:inline-block to your <a> tag.
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
display: inline-block;
}
Edit
Delete
<a/> tags are not 'blocks'
add the following:
display: inline-block;
In my case text indent was not working on H1 because of :before pseudo tag I used to correct a fixed header positioning problem
.textpane h1:before, .textpane h2:before, .textpane h3:before {
display:block;
content:"";
height:90px;
margin:-90px 0 0;
}
This applied to H1 elements with negative indent hack showed text on top of the images in FF & Opera
Keep in mind that (if you care) with inline-block the text-indent image replacement technique will fail in IE7. I recently had a heck of a time figuring that one out. I used this technique for IE7 and it works:
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
I had same issue, I checked display and text-align. finally I find out.
I was working on rtl design and in the theme the direction changed to rtl.
You can change the container or each element to ltr to fix the issue.
dashboard-edit, .dashboard-delete {
direction: ltr;
}
I have a navigation layer, and I cannot seem to get the links to center within.
This is the stylesheet I am using
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #0066FF;
text-decoration: none;
text-align: center;
}
Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.
Have you tried adding:
text-align: center;
to .Layer1 {}?
I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.
Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.
Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.
to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.
The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.