When I use
<button id="kh_send_comment">
<i class="material-icons">done</i>
Save
</button>
the position of the word Save is on the bottom of the button. I would like it to be in the middle of it. How can I do this without changing the font size?
https://jsfiddle.net/ba3vg9k8/
Use this CSS:
button i { vertical-align: middle }
https://jsfiddle.net/bgr3a1oL/1/
The reason for this is the button wraps around the larger icon, which increases the button's height and leaves the text hugging the bottom.
You can give the vertical-align for the icon a set pixel value to get the text exactly where you want it.
button i { vertical-align: -7px }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<button id="kh_send_comment"><i class="material-icons">done</i> Save</button>
Add vertical-align: middle; to the i element.
Related
I'm trying to accomplish a dynamic button which is always square, and based on the height of the text it is with. Something like this:
Basically the icon stays the same, but the size of the box varies, based on what size of text it is next to. The icon should be centered vertically and horizontally. To get it to look like the image, I had to manually put in everything, but I want it to work whether the font-size is 20px, 70px, or anything else. Basically, I don't know the height, but it should work is the goal, and that seems to be what is different in this question from others around the site/web.
This is the HTML code:
<!-- This may be any font size, but the result should be like the image above. -->
<div id="name">
<!-- This holds the text -->
<span>Amy</span>
<!-- This holds the image, and the anchor is the box. -->
<img src="/images/edit.png" alt="Edit Name" />
</div>
I've tried following this tutorial, but I can't get it to work for some reason. Everything I've tried (which is too many things to enumerate here) either gives me the right height, but wrong width, the exact size of the image, or the image as the size of the square.
Is this possible with just CSS, or am I going to have to resort to JavaScript?
Thanks.
Something like this should do it. You may have to change the size a little depending on the font. Also, you may have to vertical-align it.
.edit {
display: inline-block;
width: 1em;
height: 1em;
}
.edit img {
display: block;
}
DEMO
HTML:
<button>
<h2 id="name">
<span>Amy<a href="#" class="edit">
<img src="/images/edit.png" alt="Edit Name" /></a></span>
</h2>
</button>
CSS:
button img {
vertical-align: middle;
}
h2 {
font-size:20pt;
}
Is this what you want?
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.
so I'm trying to keep the code down to a minimum is there a way I can add a margin to the text of this href without moving the font awesome icon down also. The only way I can see to do it would be to wrap a span tag around it and setting that to have a margin.
<a id="btn" class="green-btn"><i class="social fa fa-share fa-2x"></i>Share</a>
If you want space betweeen the icon and the text try this:
.green-btn .fa-share{
margin-right:5px /*or your custom value*/
}
or
#btn .fa-share{
margin-right:5px /*or your custom value*/
}
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;
}
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.