Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407
Related
I'm trying to learn the basics in CSS but I still have some problems.
How can I hide this "a" space under the img?
I gave it a red background to make it easier to explain which part I'm talking about.
here is the problem:
http://jsfiddle.net/3c48P/7/
.feedEkList li a {
background: red;
}
This is the CSS but I cannot hide it (I want to keep the img of course)
Try display:block on image:
http://jsfiddle.net/3c48P/9/
.feedEkList li a img
{
display:block;
}
The issue is that your <a> and <img> are both inline elements so spaces are preserved during display.
However, you are treating them as block level elements and expect them to contain no such spaces.
The simplest (without going in-depth into other issues) is to make both the <a> tags and <img> tags display: block (although as salivan pointed out the img tag alone should be sufficient).
Just add this line display:block;. it will solve your problem because the img is shown in line by default
Add it in the css like this
img {
width:100%;
height: auto;
display: block;
}
img elements are "inline", just like text. This white space is the part of the line that holds the descending part of letters (for example j or g) and the vertical align of the image is set at the "baseline" of the line, where the bottom of most letters rest (abcd).
One option is, as pointed, display block in spite of it's default "inline" display. You can also avoid it changing the "vertical-align" to "bottom".
I have a class defined like this:
<div class="float-left inline">
where:
.inline {
display: inline;
}
.float-left {
float: left;
}
Can someone tell me if I need to use both float: left; and display: inline;. I am bit confused as they both seem to do the same thing.
display:inline means a element may be placed next to other items.
This is different from block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Actually there is no need to use both the properties together, but as you are using two classes having respective properties is fine, let me explain you here, if you use display: inline; ONLY, than first you need to see how inline is it different from float
Inline Elements
Floated Elements
Now, yes, am aware that span are already inline elements, but if you see, when I use float, it makes an inline element behave like an inline-block, it applies margins at top and bottom as well, while display: inline; won't.
Another difference is float is in general different positioning, when you float an element to left or right, it creates an empty space besides, which makes element below it to shift besides that.
Floated Example
While display: inline; won't
Inline Example
See the difference? So it depends on you what suits best to your needs, just make sure you clear your floating elements by using overflow: hidden; or any clearfix available out there else you will see some unexpected behavior of your layout.
Conclusion: Even if you use display: inline;, your element will be a block level element and inline, so there's no need to use display: inline;
With display you are changing the display type of the element.
With float you are setting position for that element.
Here is an answer with practical explanation why would you prefer float for positioning.
Although the two work on different aspects of the element they can be used on conjunction. For example changing an Anchor to display:block and float:left will work and allows you to set a height and width on it.
Taking a div and applying display:inline and floating it wouldn't make much sense no.
Not redundant. Actually, I meet a problem when I set a float: right with an element and it works on chrome not works in IE. Specifically, on IE, the content of element overflows the boundary of the container. So, I use display: inline and float:right together, it works very well on chrome and IE 11.
I have a fixed-width sidebar consisting of a bootstrap nav-list where some list elements have right-aligned labels.
For example:
<li>
abc_test_randomrandom
<span class="pull-right label">0000</span>
</li>
However, this doesn't work if the link is long. It expands to fill the whole line, and pushes the label to the next line.
I've put up a jsFiddle demo to demonstrate this behavior. EDIT: And now a gist too.
The desired behavior is abc_test_randomrandom and 0000 on the same line, with the long string wrapping to the next line if necessary. Is this possible?
Yes. Use a fixed width and give overflow: hidden; for the excess with text-ellipsis.
li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}
I am unable to open jsFiddle. So couldn't see the exact issue.
I think Praveen's solution is actually a better implementation, but to get the behavior originally requested, display: inline-block, word-wrap: break-word and setting the width fixes it.
li a {width: 70%; display: inline-block; word-wrap: break-word;}
In Bootstrap a pull-right is essentially just a wrapper for CSS float. You need to put the 0000 span before the abc_test_randomrandom in the markup and it should wrap the anchor to two lines as needed, so your floating element comes before the element it's floating around. You may need to set a margin-right of the anchor to be the width of your floated element. I can't get jsFiddle to load right now or else I'd give you a better example. I'll try checking back.
EDIT: I was able to get your jsFiddle to load.
If you move the spans before the anchors in your HTML and add this CSS, this works. If your text is literally going to have underscores instead of spaces then you'll need the word-wrap CSS that you mentioned in your own answer.
The benefit of this is it doesn't require CSS hacks (i.e. for display: inline-block) to work in older versions of IE, if that's a concern for your project.
.nav-list a { display: block; margin-right: 30px; }
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).
I've tried everything I can think of in Firebug with no luck.
How can I remove this white space?
You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:
.youtube-thumb img { display: block; }
You can use code below if you don't want to modify block mode:
img{vertical-align:text-bottom}
Or you can use following as Stuart suggests:
img{vertical-align:bottom}
If you would like to preserve the image as inline you can put vertical-align: top or vertical-align: bottom on it. By default it is aligned on the baseline hence the few pixels beneath it.
I've set up a JSFiddle to test several different solutions to this problem. Based on the [vague] criteria of
1) Maximum flexibility
2) No weird behavior
The accepted answer here of
img { display: block; }
which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.
1st, 2nd, and 3rd place are all a toss-up between these three solutions:
1) The solution given by #Dave Kok and #Hasan Gursoy:
img { vertical-align: top; } /* or bottom */
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Very efficient.
cons:
In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img's parent (a bit strange).
2) Setting font-size: 0; on the parent element:
.parent {
font-size: 0;
vertical-align: top;
}
.parent > * {
font-size: 16px;
vertical-align: top;
}
Since this one [kind of] requires vertical-align: top on the img, this is basically an extension of the 1st solution.
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Fixes the inline whitespace problem for any siblings of the img.
Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can't see the parent anymore.
cons:
Less efficient code.
This assumes "correct" markup; if the img has text node siblings, they won't show up.
3) Setting line-height: 0 on the parent element:
.parent {
line-height: 0;
vertical-align: top;
}
.parent > * {
line-height: 1.15;
vertical-align: top;
}
Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.
pros:
Behaves like the first two solutions on all display combinations except when the parent and img have `display: inline`.
cons:
Less efficient code.
In the case of both the parent and img having `display: inline`, we get all sorts of crazy. (Maybe playing with the `line-height` property isn't the best idea...)
So there you have it. I hope this helps some poor soul.
I found this question and none of the solutions here worked for me. I found another solution that got rid of the gaps below images in Chrome. I had to add line-height:0; to the img selector in my CSS and the gaps below images went away.
Crazy that this problem persists in browsers in 2013.
Had this prob, found perfect solution elsewhere if you dont want you use block just add
img { vertical-align: top }
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
Give the height of the div .youtube-thumb the height of the image. That should set the problem in Firefox browser.
.youtube-thumb{ height: 106px }
As stated before, the image is treated as text, so the bottom is to accommodate for those pesky: "p,q,y,g,j"; the easiest solution is to assign the img display:block; in your css.
But this does inhibit the standard image behavior of flowing with the text. To keep that behavior and eliminate the space. I recommend wrapping the image with something like this.
<style>
.imageHolder
{
display: inline-block;
}
img.noSpace
{
display: block;
}
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/