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.
Related
I want to make a blockquote with an image as background before and after. :before is not a problem, but with the :after selector, the image stays on the foreground. Text disappears...
I tried different solutions with css, like display inline-block;giving the paragraph index:99 and so on.
The css:
blockquote p:after{
content:"";
height:50px;
width:50px;
background:url("https://proef-domein.nl/chiropractic/wp-content/uploads/2019/06/quotes.png");
margin-left:-30px;
z-index:1;
position:absolute}
The position is correct, but the image stays over the text instead of below the text.
Try this it worked on my local install:
z-index:-1;
The problem is with
position:absolute;
can you position absolute the text?
Maybe using another element in absolute for text?
After is always "next to" the element, and absolute is always above.
I have an element that is absolutely positioned at the bottom of its box, and then the box itself is part of a series that are all fixed at the height of the tallest box. I am blanking on how to get some whitespace above the absolutely positioned element? JSFiddle here ... the "Do this" button in the tallest box needs some space above it and below the list.
I am trying to insert a line feed and set the white-space but this doesn't work.
.myelement:before {
content: "\00000a";
white-space: pre;
}
Thanks in advance!
You could add a bottom margin to your last li element since they are determining the height.
Add this css:
.providers li:last-child{
margin-bottom:30px;
}
of course that margin could be whatever you need.
Fiddle
Simplest way – add a padding-bottom to your items:
.ListCtr {
padding-bottom:30px;
}
http://jsfiddle.net/zh2os8yt/4/
Since your buttons contain only a small amount of text, this will work unless the screen width gets “really small”. If that’s an issue, you might want to use a bigger padding value for narrow screens using a media query.
But flexbox would be an even better tool to solve this.
Try adding padding-bottom to your boxes. For example you can edit the .ListCtr to the following:
.ListCtr {
position: relative;
padding-bottom:80px;
}
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!
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
How can I align text in the vertical middle of a Div element provided it has a position:absolute property specified?
Setting display:table-cell; vertical-align:middle; isn't working.
Thanks!
Wrap an inner div and give it position:relative; top:-50%; in addition to giving the absolute a top:50%.
Though of course if it's complicated styling, please provide your CSS.
You can get away with line-height if it's just a single line of text, you'd have to kill the absolute rule though.