While I was fiddling with this 'Fancy 3D Button' example, I found that the width seemed to be hard-coded to fit the text's width.
Here is the HTML / CSS:
body {
background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
}
a {
position: relative;
color: rgba(255, 255, 255, 1);
text-decoration: none;
background-color: rgba(219, 87, 5, 1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
-moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
position: relative;
top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
Push me!
If I remove the width property, the button would fill the page width.
Is there any way to make the button's width fit to the text, automatically?
If you are developing to a modern browser.
https://caniuse.com/#search=fit%20content
You can use:
width: fit-content;
Remove the width and display: block and then add display: inline-block to the button. To have it remain centered you can either add text-align: center; on the body or do the same on a newly created container.
The advantage of this approach (as opossed to centering with auto margins) is that the button will remain centered regardless of how much text it has.
Example: http://cssdeck.com/labs/2u4kf6dv
I like Roger Cruz's answer of:
width: fit-content;
and I just want to add that you can use
padding: 0px 10px;
to add a nice 10px padding on the right and left side of the text in the button. Otherwise the text would be right up along the edge of the button and that wouldn't look good.
Pretty late and not sure if this was available when the question was asked, set width: auto;
Seems to do the trick
Keeping the element's size relative to its content can also be done with display: inline-flex and display: table
The centering can be done with..
text-align: center; on the parent (or above, it's inherited)
display: flex; and justify-content: center; on the parent
position: absolute; left: 50%; transform: translateX(-50%); on
the element with position: relative; (at least) on the parent.
Here's a flexbox guide from CSS Tricks
Here's an article on centering from CSS Tricks.
Keeping an element only as wide as its content..
Can use display: table;
Or inline-anything including inline-flex as used in my snippet
example below.
Keep in mind that when centering with flexbox's justify-content: center; when the text wraps the text will align left. So you will still need text-align: center; if your site is responsive and you expect lines to wrap.
More examples in this stack
answer
body {
display: flex;
flex-direction: column;
height: 100vh;
padding: 20px;
}
.container {
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
height: 50%;
}
.container.c1 {
text-align: center; /* needed if the text wraps */
/* text-align is inherited, it can be put on the parent or the target element */
}
.container.c2 {
/* without text-align: center; */
}
.button {
padding: 5px 10px;
font-size: 30px;
text-decoration: none;
color: hsla(0, 0%, 90%, 1);
background: linear-gradient(hsla(21, 85%, 51%, 1), hsla(21, 85%, 61%, 1));
border-radius: 10px;
box-shadow: 2px 2px 15px -5px hsla(0, 0%, 0%, 1);
}
.button:hover {
background: linear-gradient(hsl(207.5, 84.8%, 51%), hsla(207, 84%, 62%, 1));
transition: all 0.2s linear;
}
.button.b1 {
display: inline-flex; /* element only as wide as content */
}
.button.b2 {
display: table; /* element only as wide as content */
}
<div class="container c1">
<a class="button b1" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Before And After Wrap</a>
</div>
<div class="container c2">
<a class="button b2" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Only Before Wrap</a>
</div>
Fiddle
https://jsfiddle.net/Hastig/02fbs3pv/
If you are aiming for maximum browser support, modern approach is to place button in a div with display:flex; and flex-direction:row; The same trick will work for height with flex-direction:column; or both height and width(will require 2 divs)
This seems to solve the issue:
display: inline-block;
width: auto;
Try to add display:inline; to the CSS property of a button.
just add display: inline-block; property and removed width.
Try add width: 100% for tag button
Related
There is annoying thing in Firefox that it can't handle clipping (antialiasing?) of rounded corner elements, especially if there are multiple backgrounds. In some scenarios (non-absolute elements I guess) it can be solved by setting background-clip: content-box inside a class but in other cases it can't be solver that way even with any other properties. Although, Chrome does not creating this problems (or have better working with clipping under the hood). Here some examples based on my scenarios that I managed to recreate with snippets and screenshot of results in different browsers.
Please don't offer me to get rid of multiple backgrounds and blend modes because I need it due to css doesn't support gradient transitions.
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
background-color: #2B3351;
}
.child {
display: inline-block;
position: relative;
padding: 24px 48px;
text-align: center;
font-family: "Raleway", sans-serif;
font-weight: 900;
font-size: 18px;
text-transform: uppercase;
align-items: center;
color: rgba(255, 255, 255, 0.6);
border-radius: 34px;
background-color: #181B34;
background-image: linear-gradient(160deg, #e6e7f9 11.77%, #ebebfb 74.75%);
background-blend-mode: multiply;
box-shadow: -10px -10px 15px rgba(165, 206, 255, 0.1), 10px 10px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 rgba(165, 206, 255,0), inset 0 0 0 rgba(0,0,0,0);
margin: 24px 0;
background-clip: content-box;
}
.absolute {
position: absolute;
background-color: #030b33bf;
background-image: linear-gradient(160deg, #e7ecfd, #FfffFF);
background-blend-mode: multiply;
width: 24px;
height: 24px;
border-radius: 50%;
transform: translate(150px, -60px);
box-shadow: -3px -3px 5px rgba(0, 6, 39, 0), 4px 4px 8px rgba(0, 6, 39, .35);
background-clip: border-box;
}
<div class="wrapper">
<div class ="child"></div>
<div class="absolute"></div>
</div>
I've this code :
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}
<span>
<p>25</p>
<p>08</p>
</span>
I want to make a perfect circle on my span. I try a border-radius: 50%; but it does not work.
Thanks for the help !
You can do this by giving the span a fixed width and height:
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
<span>
<p>25</p>
<p>08</p>
</span>
You need a predefined width and height on the span to be able to make it round.
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}
<span>
<p>25</p>
<p>08</p>
</span>
add line-height and width:
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
Use this code.
HTML:
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
border-radius: 50% and padding
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);
#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>
It looks like you incorrectly nested paragraph elements inside of span, which is against HTML5 spec, as span is being defined there as an element, which Content Model is described as Phrasing Content, and that:
Most elements that are categorized as Phrasing Content can only contain elements that are themselves categorized as phrasing content, not any flow content.
And because paragraph element doesn't belong to Phrasing Content list, you can use div instead of span for this purpose, only if you care to be semantically correct.
So coming back to your problem, it can be rewritten as so:
HTML:
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radius set to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
Here is JsFiddle presenting that.
I'm trying to position some text in the middle of a CSS box. i tired using top:20px; but this moved the whole but rather than the text. any idea how can i do this?
here is my code: jsfiddle
div {
background: #ff9600;
background: rgba(255, 150, 0, 0.95);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
z-index: 10;
}
<body>
<div>text</div>
</body>
Example 1
something like: this fiddle.
It uses the css of:
div {
height: 100%;
width: 100%;
background: #000;
font-size: 12px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
line-height: 80px;
}
which could be quite beneficial for you. :)
Example 2
A more versatile way would be to use span like this demo
which uses:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #123456;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Possible Alternative to (2)
A slight variation of the second example would be to treat the div like a table cell, so altering the above css to:
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
border: 1px solid red;
}
span {
display: table-cell;
vertical-align: middle;
}
And so this should also work for you.
Try to this
Remove this css in
width:100%;
height:100%;
add this css
left:0;
right:0;
top:0;
bottom:0;
padding-top:20px;
Demo
You could use padding to move the text inside the box.
However, I think that you should create a tag (a box) especially for the text, and give it some css property to center this box in the center of the main div (the main box).
Try this my code:
<div>
<span class="vertical-text">
TEXT
</span>
</div>
$('.vertical-text').each(function()
{
parent_height = $(this).parent().height();
$(this).parent().css(
{
'height': parent_height + 'px',
'line-height': parent_height + 'px',
});
$(this).css(
{
'line-height': 'normal',
'display': 'inline-block',
});
});
Demo: http://jsfiddle.net/Silon/caonccjx/
I am trying to set the width of an element progress to be the width between two other elements. Here is the HTML code I am using
<span class="current_rank"><?php echo $this->current_rank;?></span>
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<span class="next_rank"><?php echo $this->next_rank;?></span>
I am trying to get the width of the progress bar to be the width between the two <span>'s
Is this possible with CSS?
Update
.progress {
width: 550px;
height: 15px;
margin-bottom: 10px;
overflow: hidden;
background-color: #666;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
width: 0;
height: 100%;
font-size: 12px;
line-height: 15px;
color: #333;
text-align: center;
background-color: #ffd700;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.VIP_ranking > .current_rank {
margin-left: 30px;
margin-right: 25px;
}
.VIP_ranking > .next_rank {
float: right;
margin-right: 22.5px;
}
.VIP_ranking > div.progress{
position:absolute;
display:inline;
margin-left: 10px;
}
There are several CSS only solutions, but it really depends what are the requirements, in terms of browsers compatibility.
CSS calc function - you can use it if you know the width of the span elements, either the absolute width or the width in percentage. For example: width: calc(100% - 200px) or calc(80%). This solution will work in IE9+, Chrome and FF
Using display:flex; and justifying your content. You can read more about it here. You will not need to know the width of the spans, but this solution will only be compatible in IE10+, Chrome and FF.
I have a button and I want it to be a particular size
html
<a class="button icon Raise"
onclick="raiseButtonAction(realPlayer, gameState)" id="nupp1" href="#"><span>RAISE</span></a>
css
.button {
position: absolute;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
to(#65a9d7) );
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
-moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
color: white;
font-size: 19px;
font-weight: bold;
font-family: Segoe;
text-decoration: none;
vertical-align: middle;
But if I put for example width:100px; it doesn't change in size.
Am I doing something wrong or you just can't change the size of a premade button?
Try this..
.button {
display:inline-block;
min-width: 50px;
width: 80px;
padding:5px 10px;
}
That style is on an a element, which is an inline and won't accept a width. You could change it to be inline-block or block and then you'll have control over the width.
You need to make your <a> into a block level element. Here's an example of it working.
I just added this to your CSS for .button:
display: block;
width: 200px;
text-align: center;
Missing
display: block;
Have to set display to block if you want to set a fixed width on an inline element