I have a button which I'm using multiple times in my webpage. The buttons styles will be as
Button with Text and Image.
Button with only Image.
Button with only Text.
As shown in the fiddle
http://jsfiddle.net/xzBaZ/4/
I'm using he same css for the button class. I need to align the Text Vertically to center if it is the first case. and no extra alignment is required for other cases.
How can I do this??
vertical-align: bottom on the <img> or make the image and the text equal line heights. The latter requires you to know the image height beforehand.
You should Write the text in span
<button onclick="return false" class="super button"><span>Awesome Button ยป
</span> <img src="/Buttons5/add-to-cart-light.png" alt="" width="28" height="20"/>
and also specify the css for span
.button span{
float:left;
margin-top:3px;
}
Related
Guys I am using a button with icon on 2 side of the text and it works when the text is smaller, but at times I have longer text and had to break them into 2 lines. how to do it ?
<button type="submit" class="button-orange width-280" > <img src="img/icon-getDetails.png"> Get More Details <img class="button-icon" src="img/icon-external-link.png"> </button>
<button type="submit" class="button-orange width-280" > <img src="img/icon-basket.png"> Add to compare basket <span class="badge white">3</span> <img class="button-icon-chevron" src="img/icon-chevron-right.png"> </button>
I am attaching the image with this. I need the longer text also to be appearing like the 1st button.
I don't have your CSS, but I'm guessing that the class width-280 adds a width: 280px to the button.
Instead of using a fixed width, use a minimum width. Change width: 280px to min-width: 280px.
You could set the icon as a background image on the button, and pad the button's sides to the width of the icons. Please note this method is not IE8 friendly. :(
For example
HTML:
<button>
Get more details
</button>
CSS:
button {
background:
url('img/icon-getDetails.png') top left no-repeat,
url('img/icon-external-link.png') top right no-repeat;
padding: 0 30px;
}
Here's a fiddle that might help you imagine it.
Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited
Hey there my question is pretty simple i'm trying to do a button exactly like the one you can get in vb form. For Example I want some text in my button and I also want an image in it. The only problem is that in VB.net there is only two type of button the first one is button with an image in it and no text at all and the second one is one with only text in it. The only way i've found is putting the image in the background. Unfortunatly the image is taking all the spaces in the button. I'd like to know if there's a way to align the back-ground image to the left or to right for example
Here my HTML code for the button:
<asp:Button ID="btn_LoadReport" runat="server" Text="Charger"
style="margin-left: 0px; margin-bottom: 0px; margin-right:0px;"
Height="35px" Width="102px"
CssClass="Charger" />
And this is the css code that I Have for the moment:
.Charger
{
background-image:url(report.png);
background-repeat:no-repeat;
text-align:left;
}
Thx
I've tried putting the image in the background with a css but my text is over the images
This is what the background-position attribute is for.
<button>Text</button>
button {
padding-right:40px;
background-image:url(myImage.png);
background-repeat:no-repeat;
background-position:center right;
}
Note that the padding-right property is used to prevent the text overlapping the image.
JSFiddle example.
I am working round a custom CMS called phpVMS. In this, there is a bubble box that displays when clicked on an icon on the map. However, the text align seems to be centered instead of going to left? I've linked a picture:
The code that I am using for the bubble span is:
<span style="font-size: 9px; text-align: left; width: 100%;">
<strong>Pilot In Command: </strong> <%=flight.pilotname%><br />
... so on.
</span>
I've tried to look where text could be centered, but cannot find anything sadly in the css or the html. I have also noticed that width and font size work, but text-align is ignored. I hope you can help me.
Thanks and regards
You can't use text-align within a span as it is not a block-type element. Try replacing your <span> with a <div> of the same parameters.
I'm trying to line up some text between two images on its left and right. Why isn't it moving up?
<img src="srchere" /><span style="padding-bottom:10px;">Some text right here!</span><img src="srchere" />
The two images are larger than the text, so it looks like the text isn't aligned and is positioned lower than the images. How do I raise the text up? The code I have above doesn't seem to move the text up.
Thanks.
If you want images to vertically align with text, you need to use:
vertical-align: middle
Note that your padding-bottom might throw this off a little.
Also, if you are not already doing it, you should use an external stylesheet instead of inline CSS.
If you want to adjust manually, this can do
<span style="vertical-align:100%">
increase/decrease the percentage until u satisfy
HTML:
<div>
<img src="srchere" />
<span>Some text right here!</span>
<img src="srchere" />
</div>
CSS:
div {
display:block;
}
img {
height:30px;
width:30px;
}
img, span {
vertical-align:top;
display:inline-block;
}
Try adding align="absmiddle" attribute to the images.
By "up" I assume you mean aligned to the top of the container box. This should do what you want:
<img style="float: left;" src="...">
<p style="float: left;">Filler text. Filler text. Filler text.</p>
<img style="float: right;" src="...">