You can see here in this fiddle that the text isn't sitting vertically center after I apply the :before pseudo:
FIDDLE
.explore:before {
content: url('../images/explore.png');
margin-right:5px;
}
I've tried to adjust the line height but it doesn't affect the text in any way.
Any ideas as to why it knocks down my text and how I can fix this problem?
Add vertical-align: top;
http://jsfiddle.net/bfkv8zsq/3/ Here you go!
Related
I have built a content div with three further divs who have the
display:inline-block;
attribute. One of them contains another div element which has some audio controlls. The right div has a really big margin! Chrome and Firefox don't show any margins or paddings. If I delete the #music element, everything is okay.
Here is a live demo
Thanks for helping
Because you are using the display: inline-block; definition, your content is verticaly aligned to baseline by default.
Apply this on your .frames class:
vertical-align: top;
Problem solved. ;)
if you add float:left to #music it gets fixed _
as suggested using clearfix on parent element doesn't hurt:
.parent:after{
display:table;
content: "",
clear:both
}
I have the following fiddle, not able to align the image using :after in my case, it is not as bad as in fiddle, but it is touching the horizontal line more towards the bottom of the box foreach div instead of aligning with the text inside div.
http://jsfiddle.net/pT7vX/
Just change your position to relative, and tone down the padding. At least I assume this is more what you're after.
div.lnk:after {
background:image;
content: ">";
position:relative;
padding:5px;
background-repeat:no-repeat;
}
http://jsfiddle.net/pT7vX/1/
hope this helps.
I tried to vertically align a span in a div by css line-height and div height.
All works fine, but the center span shifts to the bottom when the icon span is added.
Could anyone give me a hint? Thanks.
<span class="icon"></span>
Failed at vertical align
http://jsfiddle.net/9CJvm/
Works fine without icon span
http://jsfiddle.net/9CJvm/1/
In this instance, you could add vertical-align:middle to the span.icon element:
The default value for the vertical-align property is baseline; thus the element was being aligned at the base of the parent element.
UPDATED EXAMPLE HERE
.icon {
vertical-align:middle;
background-repeat:no-repeat;
background-image:url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/50264_300699565862_8082907_q.jpg);
height:50px;
width:50px;
display:inline-block;
}
You can use vertical-align:middle for both span.center and span.icon.
I try to have to div floating side by side.
I have found a solution that work only with text :
http://jsfiddle.net/Sy392/2/
For that, i'm using table-cell :
.dablock {
display:table-cell;
}
But if there is an image that replace the text, the "floating" effect doens't work.
http://jsfiddle.net/Sy392/1/
Thanks you for your help :)
Add
vertical-align: top;
to .dablock
Try
vertical-align: top;
On the img tag. By default, images flow the text directly at the bottom of the picture.
http://jsfiddle.net/Sy392/5/
Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/