I have a bunch of text and images in a line and i want to align vertically. It all seems to work except I just added some bold text and the bold text seems to show up a little lower than the regular text.
here is a screenshot:
here is a simpliried view of my html:
<span class="midAlign">
Filter: [<b>Apps: </b>My App Name ]
</span>
here is my css:
.midAlign * {vertical-align: middle;}
if I remove the bold tag, it seems to line up correctly:
The problem is that the .midAlign * only applies to the <b> element. Just removing the * solves the problem.
I have a bunch of text and images in a line
So when you use .midAlign * it applies to all the elements, so the face is you don't need to apply that property to all elements, you need that for img only so use
.midAlign img {
vertical-align: middle;
}
And it will solve the issue.
Demo
Also, when you use the * selector, it impacts the performance, you are using that for no good reason for this particular case.
I will explain you why that happened. b and img both are inline elements, so when you apply vertical-align: middle; it aligns the element to the baseline, so say we have an img and a b tag, so b will be vertically aligned middle considering the entire height of an element... see this
So when you are using middle as the value, it's middle but, to the entire element height and not just your text
Demo
So technically your b tag was aligned middle vertically, but it's just that you don't have to align that, so use specific element selector instead of a generalized * selector.
Related
I have a document like this:
This is some text.<br>
This is some more text.<br>
This is yet some more text.
This renders like this:
This is some text.
This is some more text.
This is yet some more text.
Is there any way to adjust space between lines, but only where the <br>'s appear? The output might look like this:
This is some text.
This is some more text.
This is yet some more text.
This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.
How can I adjust the amount of space between lines where <br> appears?
It is possible to target a <br> tag with CSS but it will not be very cross-browser compatible and it just isn't a very good idea because anyone looking at your code will assume you haven't got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.
br {}
The <br> on it's own has no default height. If you have an HTML page with nothing but a <br> you have an empty page. The style on the <br> tag will be
<!-- HTML -->
<br/>
The page will have this styling
height: auto;
line-height: normal;
max-height: none;
min-height: 0px;
The height of that a <br> tag represents is inherited from the styling of it's parent container. Thus if it is nested within a paragraph; the <br> will equal the height of 1 line of text based on the line-height and font-size of that paragraph.
<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>
I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it's not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.
The current CSS1 properties and values cannot describe the behavior of
the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break
between words. In effect, the element is replaced by a line break.
Future versions of CSS may handle added and replaced content, but
CSS1-based formatters must treat ‘BR’ specially.
- Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements
An appropriate solution would be to separate the upper and lower block into two containers (<p>) and set a margin between the two blocks. If you use a <p> tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..
// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.
Or merely adjust the line-height of the text if you don't mind the space between every other line increasing as well
You could potentially also find the pseudo-selector ::first-line useful.
Though I can't fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the <br> wrap it in a container and set the line-height of the container.
<div style="line-height:50px;"><br></div>
Yes you can...like by using line-height in css
.test{
line-height:40px;
}
Demo
You can use padding-top also
Demo2
I want to attach a Font Awesome icon to the last word in a text string:
foo bar●
But if a line wrap is required, I want the icon to attach to the last word and have them wrap together:
foo
bar●
My problem is very similar to:
Prevent :after element from wrapping to next line
However, the solution assumes I have access to the last word. In my case, the text will be generated dynamically. Is there a css/html-only way to ensure the icon wraps with the last word?
Here's a jsfiddle.
I just wanted to point out why the change that #Unmocked provided actually works, and it has to do with the difference between display: inline and display: inline-block.
To explain, here's a little background on the difference between block display and inline display.
Block Display
block elements, in general, are elements which cause layout. They receive their own bounding box, and have the ability to push other elements around to some degree in order to fit into the space available within the browser's rendering area. Examples of block items include: h1, p, ul, and table. Note that each of these items, by default, starts a new line and also ends its own line when closed. In other words - they fit into a block of text by creating their own paragraph-level section.
Inline Display
inline elements, in general, are displayed in-line with the text. In other words, they are designed to display with-in the line of text. Examples include i, b, or span. Note that each of these items, by default, continues with the flow of its surrounding text, without forcing a newline before or after itself.
Enter the mid-way case...
Inline-Block Display
inline-block is a hybrid of the above two. In essence, an inline-block element starts wherever its preceding text leaves off, and attempts to fit into the flow of the document inline. However, if it reaches a point where it needs to wrap, it will drop to a new line, as if it were a block element. Subsequent text will then continue immediately following the inline-block element, and continue wrapping as normal. This can lead to some strange situations.
Here is an example, to show what I mean. To see it in action, check out this cssdesk snippet.
In your example, you were setting the :after pseudo-element to be display: inline-block - which meant that when it happened to extend past the right-most boundary of the wrapping display, it acted like the light-blue text in the example - and wrapped, as a block. When you instead change the :after element to display: inline, it causes it to act just like any other text - and without whitespace between it and the preceding letters, the word-wrap acts as you wanted it to.
I hope this helps!
Note: The other thing which changed between your original fiddle and the updated one is the elimination of white-space around the text.
In the first fiddle, your HTML looks like:
<div class="container2">
foo bar
</div>
While the browser doesn't display the spaces before and after the text, it does contain the spaces, and when the :after element is rendered, it is as if this is happening:
<div class="container2"> foo bar :after</div>
The browser compresses the multiple spaces into single spaces, but still puts a space between the word "bar" and the :after element. Just like a space between any other words, this will cause the wrap to occur after "bar" but before :after at a certain width.
In the second fiddle, you are using:
<div class="container-wide">foo bar</div>
<div class="container-narrow">foo bar</div>
In this case, because there are no spaces trailing the "foo bar" strings, the browser renders the :after element displayed immediately following the end of the content string. It is as if this is happening:
<div class="container-narrow">foo bar:after</div>
No break in inline-rendered text means no break.
For an example demonstrating this, please see this update to your jsFiddle.
Interestingly enough, I found you only need to change one line of code for this to work.
Testing on your .container2 element in jsFiddle, change this
.container2:after {
font-family: FontAwesome;
content: "\f111";
display: inline-block;
}
to
.container2:after {
font-family: FontAwesome;
content: "\f111";
display: inline;
}
It seems to work with any width I set the container to and will stay connected to what ever foo will be.
You can use negative margin the width of the icon and css transform. Here a fiddle how to do :
.container {
width: 50px;
}
.icon-circle {
background:black;
height:10px;
width:10px;
display: inline-block;
margin-left:5px;
}
.ANSWER{
display:block;
padding-right:15px; /* width of the icon */
}
.ANSWER .icon-circle{
margin-left:-10px;
transform:translate(15px);
}
<h4>What we want</h4>
<div class="this-is-how-it-should-wrap">
foo bar<i class="icon-circle"></i>
</div>
<div style="margin-top:25px"></div>
<h4>What happenned</h4>
<div class="container NORMAL">
foo bar<i class="icon-circle"></i>
</div>
<div style="margin-top:25px"></div>
<h3>The answer</h3>
<div class="container ANSWER">
foo bar<i class="icon-circle"></i>
</div>
Have a nice day!
Stupid question maybe, but I cannot seem to get the text to wrap around my images. In the editor it looks fine, everything is wrapped around it, but when I save it, there is no wrapping.
example: http://www.beatinganger.com/three-reasons-for-angry-children
remove the float: left; from #left_container p
there's no need to float all the paragraphs you already have the image floating inside the content so it's the only one that needs to float for the p or any other element to wrap around it
It sounds like you may need to add styles to the images, either float left or float right - can't say for sure as the link is broken.
Edit: It is because you have width:100% and float:left set on #left_container p, and the images you are adding are wrapped in p tags. Remove width:100% and float:left and you should be back in business.
as clairesuzy says aswell...
Put a float on the <img> tag. But I suggest to avoid writing css in the tag though, it's not good practice unless you really have to. Do it externally. You can target the image by doing, p img{ float: left; } (basic code), depending on the class or id you've giving the tags.
hi all I am new to use css styles,
when i use the below code the complete word is splitting into two words and is moving to next line , I am not getting the complete text in a well paragraphed styles.
<div style="float:left; display:block; word-wrap:break-word; width: 250px">
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>
here i am binding the mail message to label at run time.
How to get the text wrap automatically when content applied to it without splitting the word.
can anyone suggest how to implement this?
thanks in advance
i think you need to remove word-wrap:break-word from your style. That is breaking your words.
Edit to make your text wrap you can set the width of the paragraph or the containing div to a specific size
example:
width: 400px
UPDATE:
<div class="text">
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>
CSS:
div.text {
float:left; width: 250px; white-space: normal;
}
i am not sure how asp renders i am assuming it becomes a tag
div.text label {
display:block; width: 100%;
}
Sounds like you want the white-space property, like:
.myTextClass {
white-space: normal;
}
Update: And judging from the code you just posted, you also probably want to get rid of that word-wrap style.
CSS2 has a number of properties that define how a paragraph of text is laid out:
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-indent Specifies the indentation of the first line in a text-block
It's actually default behavior for text to wrap and be split on whole words. To ensure it does you can set white-space:nowrap, but I'm not sure you need to do that in your case.
The behavior you're describing is most likely caused by the word-wrap:break-word property you have in your code. The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line.
You have defined that long words can simply be broken in half when they don't fit. Removing this rule from the style attribute will give you back the default behavior. If not you can change the rule to word-wrap:normal to be sure.
I'm trying to place normal size text on the same line as a header tag. Doing this put the normal size text on the next line because a header tag is a block element.
<h1>Header</h1>normal size text
Any help is much appreciated.
h1{display:inline;}
Will cause the H1 Tag to stop blocking
Or, if you don't want to use inline elements, float the h1 instead:
h1 {
float:left;
}
In some scenarios may need to wrap both the h1 and normal size text in a div, that's also floated left, to keep it contained on the same line:
<div id="foo"><h1>Hello</h1>World</div>
alternatively, you might want to try
<h1>Header <span class="normal">normal size text</span></h1>
, and style the .normal span using css to look like normal text. not semantic, but visually works even in IE6.