I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class:
span.my-profile {
background-image: url('http://placehold.it/450x100/fc6');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;
}
<span class="my-profile">My Full Name</span>
However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?
Thanks in advance.
Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.
Use a pseudo-element :before to place the image (change the width, height and margins):
span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }
Try to play with some width-height, padding and display:block properties, it will work.
check this fiddle here
Try to use css style like below
span.my-profile{
width:200px;
height:100px;
display:block;
background:url(http://placehold.it/200x100) no-repeat;
padding-top:100px;
text-align:center;
}
Related
I have a button that contains text and an image illustrating a click event. I understand it is feasible to display an image as a background on the button.
CSS:
.upperLeftButton {
display: inline-block;
background-image:url(Images/checkmark.png);
height:50px;
width:200px;
}
HTML:
<asp:Button ID="checkInButton" runat="server" Text="Check In" OnClick="checkInButton_Click"/>
Is there any way to display the image and text side by side within the button?
Yes...use background-position but that will depend on the look you are going for...which we can't tell without the actual image.
Quick demo...
.upperLeftButton {
display: inline-block;
background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg);
background-repeat: no-repeat;
background-position: center left 25px;
height: 50px;
width: 200px;
}
<button class="upperLeftButton">Check</button>
Add an img tag inside the button
Because the button element can contain inner HTML content, you may use an img tag as an alternative to setting a background-image in CSS.
img {
margin-right: 5px;
vertical-align: middle;
}
button {
padding: 5px;
}
<button type="button">
<img src="http://placehold.it/30" alt="Place Holder" />
My cool button
</button>
Add padding-left: 30px (or whatever width of checkmark.png is) and background: url(images/checkmark.png) top left no-repeat to button CSS, so it will offset the text, but leave icon in left corner.
EDIT: also, must likely you should add padding-top: 10px (or so) as well, so text is centered vertically in middle to icon as well.
Another idea is to redesign (even with simple paint) background and add 'blank' space for text and place it there with css.
.button{
background-image: url('http://community.avid.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.53.19.51/WhiteBlack10801440x1080.png');
background-size: cover;
width: 200px;
height: 50px;
text-align: left;
padding-left: 32px;}
Like in fiddle here:
https://jsfiddle.net/pp719t5n/
Black space is your image and white space background for your text.
i'm new to css sprits. i have added a small red color arrow like image to all links in a DIV ID. it looks like this.(image attached)
how to get some padding after the background image ? i mean some space between image and text using CSS.
CSS
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
height: 12px;
display:inline;
}
HTML
<div id="maincontent">
Btech III
</div>
i tried adding to css padding right, but it is giving some space after text not after image.
You want to use padding on your link, this will leave the background where it is but move the text, try padding-left: 25px;. But adding padding will add to the width so you will want to adjust the width of your link and reduce it by the amount of padding you have added (maybe not in this example)
Also your example image isn't loading
Try this:
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
padding-left: 25px;
height: 12px;
display:inline;
}
just apply a padding-left or a text-indent to your link
I have been struggling with something which in theory should be very simple for a few days now... and i am determined not to give up.
I am trying to achieve this:
Essentially horizontal rule, with an ornament between - the HR will span the full width of the screen.
So i sliced my PSD to drop out the ornament as a image - and i am trying to overlay this onto a centered but failing miserably.
My Markup:
<div>
<hr>
<img src='assets/img/ornament.png' class='center'>
</div>
CSS:
hr{
height: 2px;
color: #578daf;
background-color: #578daf;
border:0;
}
I just cant figure out how to make the image appear in the centre of the HR.... Any help or pointers would be appreciated.
You can also accomplish this with a CSS pseudo element. All that's needed for HTML is the <hr>
hr:after {
background: url('yourimagehere.png') no-repeat top center;
content: "";
display: block;
height: 30px; /* height of the ornament */
position: relative;
top: -15px; /* half the height of the ornament */
}
Change the markup tp
<div class='hr'>
<hr>
<img src='assets/img/ornament.png' alt=''>
</div>
Add the following to the stylesheet, replacing 16px by a suitable value that depends on the height of the image and the expected font size.
.hr { text-align: center; }
.hr img { position: relative; top: -16px; }
However, a better approach is to use just an image, centered inside a div element that has a suitable background image that repeats horizontally. The background image would be a piece that is of the same color as the overall page background but has a horizontal line in the middle.
Check out this fiddle. You can set the ornament image as a background on the div with the ornament class.
off the cuff...
using the center image for the hr and a repeated line segment for the div...
<style>
.line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;}
.line {background: url(as_line.jpg) center repeat-x;}
</style>
<div class="line"><hr></div>
This is the live example:
http://jsfiddle.net/NjnAF/
The div#con is the search result panel,I want the search item displayed in the list manner with the icon and text.
Now I can not make the icon align middle vertically and make the text the "1" "2" just in the center of the image.
Any suggestion?
I used :
div.item div.img {
float: left;
width: 22px;
height: 25px;
background-image: url('http://i.stack.imgur.com/NpSHB.gif');
background-repeat: no-repeat;
background-position: center left;
text-align: center;
vertical-align: middle;
}
and I have updated the fiddle. Is that what you needed?
Use line-height - vertical alignment: block level elements, like a div do not have any effect with vertical alignment. You would need to use line-height or use absolute positioning with div as relative.
you need to modify the CSS
div.item div.img{ text-align:center;
margin-top:2px; /*can change this according to your need */
}
Add these two properties. Vertical align will not work. Fiddle http://jsfiddle.net/NjnAF/2/
I have an anchor element that looks like this
<img src="imgurl"/>Text
I would like the image and the text of the anchor element to vertically align. I've tried adding vertical-align (css), padding, margins, ets, but the image will not vertically align with the text.
Vertical align only really applies to sibling elements. This should work:
<img scr="imgurl"/><span>Text</span>
With CSS:
a img, a span { vertical-align: middle; }
How do you mean "vertically align"? Should they be next to each other, or on top of? In case of next to each other, should the text be aligned with the top, center or bottom of the image?
If your problem is that they are displayed on top of each other instead of next to, add the following to your css:
a img { display: inline; }
If your problem is the opposite, add this:
a img { display: block; clear: both; }
and see if that helps.
The Proper Way to Align Images and Icons with Anchor Tags is
In your css
a {
background: transparent url(/images/your_image) scroll no-repeat left center;
padding: 2px 0px 2px 20px; //fit as you need
}
In your HTML
Text