I thought line-height would vertically center align text. But this is not happening for my button. Why?
The text is bottom aligned in FF, Opera and Safari.
Her is my fiddle.
<button class="get_discount_rate">Button</button>
button {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
min-width: 90px;
height: 24px;
line-height: 24px;
margin: 5px 10px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
border-radius: 3px;
}
Vertically center aligned text inside button (Tested in Chrome, FF, Safari, Opera and IE8)
button {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
min-width: 90px;
padding:5px;
margin: 5px 10px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
border-radius: 3px;
}
DEMO.
Related
button css fixed with height make the vertical position ugly as each button text are more than one row
I tried to comment the height:80px; then all buttons are aligned at top vertically, but all buttons will have different height, bring the BUTTONS GROUP look ugly, especially I need to generate over 10 pieces of button
button {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
width: 120px;
height:80px !important;
display:inline-block;
padding:5px;
margin: 5px 10px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
border-radius: 3px;
word-wrap: break-word;
}
<button>Text in one row </button>
<button>Text in more than one row in this button </button>
<button>Text in more than two rows in this button which have same height </button>
<button>Text in more than three rows in this button which have same height, but more text </button>
CLICK to open an image
jsfiddle
How to have buttons fixed in height and all buttons locate vertically-top.
Note: each button have different number of words, word-wrap into 1 line, 2 lines, 3 lines...
If you add vertical-align: top; to your button element this will resolve your problem
CSS
button {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
width: 120px;
height: 80px;
display: inline-block;
padding: 5px;
margin: 5px 10px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
border-radius: 3px;
word-wrap: break-word;
vertical-align: top;
}
Run the code snippet below to see the result
button {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
width: 120px;
height: 80px;
display: inline-block;
padding:5px;
margin: 5px 10px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
border-radius: 3px;
word-wrap: break-word;
vertical-align: top;
}
<button>Text in one row </button>
<button>Text in more than one row in this button </button>
<button>Text in more than two rows in this button which have same height </button>
<button>Text in more than three rows in this button which have same height, but more text </button>
I've got an input box when I apply border-radius to it there is a white space between the input-box and border.
Not sure why it is appearing. Please help
Note: i'm using bootstrap 3
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
border: 2px solid #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
remove Borders as you're giving same colors to both border and
As your border color and background color are the same: Remove border and increase height or padding to compensate for height of border.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
color: #1d79d1;
min-width: 96px;
height: 34px;
border-radius: 32px;
background-color: #1d79d1;
}
I had similar issues. The input field and submit type can have rendering issues with border and border-radius feathering the border and background color.
You can us a box shadow to achieve the same effect.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
/* Change This */
/* border: 2px solid #1d79d1; */
border: none;
/* Add This */
box-shadow: 0 0 0 2px #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
I've got the following:
HTML:
<div class="boxy"><img><p>Paragraph testing.</p></div>
CSS:
.boxy{
width= 150px;
background: #E5E5E5;
filter:alpha(opacity=90);
opacity:0.9;
color: #e9e9e9;
font-family: "Century Gothic", arial, sans-serif;
border-radius: 8px;
font-size: 12px;
font-weight: bold;
padding: 2px 2px 2px 5px;
margin:0 auto;
overflow: visible;
}
I notice that on jsfiddle the div appears long although I've limited it by width. I've also added Overflow:Visible but did not work. Would appreciate any advise. Thanks!
Change:
width= 150px;
To this:
width: 150px;
This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working.
If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What?
<button type="submit" class="flat-button">Submit</button>
<style>
.flat-button {
float: left;
position: relative;
border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border: none;
padding: 0 12px;
margin: 0 3px 3px 0;
outline: none;
cursor: pointer;
color: white;
font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: none;
border-collapse: separate;
height: 26px;
line-height: 26px;
background: #5191cd;
}
.flat-button:hover {
background: #1c3f95;
}
.flat-button:after {
position: absolute;
content: ' ';
height: 0;
width: 0;
left: 100%;
border: 13px solid transparent;
border-left-color: #5191cd;
}
.flat-button:hover:after {
border-left-color: #1c3f95;
}
</style>
After playing around for a while, I found a simple fix for IE9.
http://jsfiddle.net/thirtydot/BWC9q/10/
All you have to is add overflow: visible to .flat-button.
I have used following css for select tag:
select {
background-color: transparent;
border: 1px solid #A96800;
color: #fff;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
This css affects the text also.
You are unable to see the options because in your css, you are setting text's color to white.
color: #fff;
Just remove the above line so that your css looks like:
select {
background-color: transparent;
border: 1px solid #A96800;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
Now you can view your options as well.
Here's the updated fiddle: http://jsfiddle.net/UJMkN/1/
Hope this helps.