I have submit buttons or normal buttons of varying width depending upon their values wrapped inside fixed divs. Now the buttons won't center inside the div even after having margin: 0 auto; and display:block; because of the missing width property. How to have them centered without explicitly setting the width for each button ?
input[type="submit"], .button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: white;
display: block;
cursor: pointer;
margin: 0 auto !important;
clear: both;
padding: 5px 7px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 14px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
Set the input[type="submit"], .button {}
to display: inline-block;. Then set the parent div to text-align: center;.
Buttons are inline elements. Is the display:block necessary for other reasons or does anything speak against generally centering all text/inline-elements within the div?
If not, you could assign text-align:center to the div instead and remove display:block from the button.
As a side note, your current style centers the button in FF12. What browser are you using? Edit: Also works in IE9 (jsfiddle).
http://jsfiddle.net/gSaBj/1/
check out this url....
Related
I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.
Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)
This is a jsfiddle
http://jsfiddle.net/2GpmW/
when I set the css, I did this:
.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select {
border: none;
color: #525252;
height: 30px;
line-height: 15px;
margin-bottom: 10px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 2px 0px 2px 5px;
width: 400px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background: #DFDFDF;
font-family: inherit;
font-size: inherit;
}
so as you see the css show be applied to both input text and text area but for some reasons, the label beside the text area becomes down and place holder inside the text area is not centered vertically as it is in the input text
please :
1- why is that happening?
2- how to solve it
Many thanks
You have to use this:
textarea{
vertical-align: top;
}
fiddle
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell element.
You have to add vertical-align:middle to both textarea and label.
label, textarea{
vertical-align: middle;
}
I want my anchor tag look like a button, and created this style JsFiddle
.details-button {
background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent;
border: 1px solid #FAB149;
-ms-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px #999999;
-ms-box-shadow: 0 1px 2px #999999;
box-shadow: 0 1px 2px #999999;
color: #FFFFFF;
cursor: pointer;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
-ms-text-shadow: 0 -1px #099FDF;
text-shadow: 0 -1px #099FDF;
margin: 4px;
height: 28px;
width: 85px;
vertical-align: central;
align-items: center;
text-decoration: none;
font: menu;
display: inline-block;
/*padding: 6px 0 5px 18px;*/
}
It looks as I want, but how to center text horizontally and vertically inside anchor tag?
Add
text-align: center;
line-height: 28px;
working demo: http://jsfiddle.net/3SE8L/2/
line-height and padding work if the height of the element is hard-coded, but I like to use
{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
to keep text centered in a tags where the height may change.
To align your text in the center horizontally and in the middle vertically, try this:
CSS: Example Fiddle
.details-button{
//your existing styles
//height: 28px; <-- remove this entry
text-align: center;
padding: 6px 0;
}
First, remove this style declaration; it is invalid markup:
vertical-align: central;
Next, add this to center your text horizontally:
text-align: center;
Finally, make your height auto and instead of a line-height declaration, set the padding to taste:
height:auto;
padding:3px 0;
That should do it! Be sure to remove the invalid declaration as it can cause your CSS to break in some browsers.
This works:
{
display: grid;
justify-content: center;
}
Simply text-align: center; in your existing class.
So simple, just add
text-align: center;
to your targeted class.
I am trying to create a <kbd> tag for myself. I was trying with this image like below,
CSS:
kbd {
font-family: Courier;
padding-top:8px;
padding-bottom:8px;
padding-right:15px;
padding-left:10px;
background: url('kbd.png');
background-repeat:no-repeat;
}
HTML:
<p>Open Terminal <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>T</kbd> </p>
But images are not showing completely unless the text is large enough to cover the image. see the screen shot below.
Also I could not able to bring the text at center, I tried align but could not succeeded.
Any help including any better way to have <kbd> tag will be appreciated.
It's very worth noting that this could be done pretty much entirely without the need of an image. It would be more flexible without it; a long <kbd> text would break if it were an image, but wouldn't if it was done entirely in CSS.
So I propose:
http://jsfiddle.net/TLV4a/1/
kbd {
display: inline-block;
min-width: 45px;
text-align: center;
font-family: Courier;
margin: 0 5px;
padding: 0 5px;
background-color: #f7f7f7;
border-width: 1px 1px 3px;
border-style: solid;
border-color: #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 4px 1px #fff;
box-shadow: inset 0 0 4px 1px #fff;
line-height: 1.75;
}
If you have even padding, instead of different left vs. right padding, as well as utilise a min-width along with text-align: center;, you can get it to display nicely.
http://jsfiddle.net/TLV4a/
kbd {
display: inline-block;
min-width: 50px;
text-align: center;
font-family: Courier;
padding: 6px 5px 8px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png') no-repeat 50% 0;
}
Have a look at this jsFiddle
kbd {
font-family: Courier;
padding-top:6px;
padding-bottom:6px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png');
display: inline-block;
width: 54px;
text-align: center;
background-repeat:no-repeat;
}
You can use this code to get your desire resutl:
kbd {
background: url("kbd.png") no-repeat;
display: inline-block;
font-family: Courier;
min-height: 31px;
min-width: 54px;
font-size: 0.75em;
padding: 6px 0 0;
text-align: center;
}
/*use font size to adjust with the key image and use padding 0px for the left and right after that use text-align to obtain your best result .I have attached an image look it*/
Adding background-size may be your best solution.
background-size:100% 100%;
You can use text-align:center for align your text and on the background image you can use a z-index Property.
have a look here for z-index examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I'm trying to embed some CSS3 for my website buttons using custom CSS3 button generator (http://www.cssportal.com/css3-button-generator/). However, it creates some annoying issues. The whole div is pushed downwards! The CSS of the div that includes it is:
.login {
position: absolute;
right: 10px;
top: 10px;
color: #DDD;
font-size: 14px;
}
And the CSS of the button:
.button {
font-family: Arial;
color: #ffffff;
font-size: inherit;
padding: 7px;
text-decoration: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #003366 2px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#001a33));
background: -moz-linear-gradient(top, #42aaff, #001a33);
}
If you want to check the html of the website itself, it's the #navbar of http://www.nosfistis.com/
The CSS rule padding: 7px is causing it to be pushed down. Currently you have all these elements pushed down 10px using absolute positioning. You'll either need to pull that one button up with negative margins (bad idea usually) or push all the others down. Generally try to keep your elements the same height in situations like this (ie: add padding to smaller elements).