My question is simple, how can I center these two elements using the css "button" class dynamically? -> http://jsfiddle.net/MyVN4/ (I don't want to specify the width of the elements)
.button {
background-color: black;
border-radius: 10px;
color: white;
display: inline-block;
padding: 10px;
}
I've been looking other similar questions but none of the solutions work for this problem.
Thanks in advance for your help!
put text-align: center; on its parent (whatever its parent will be).
Given that they are inline elements, just set text-align:center on a parent element, in this case, the body element:
UPDATED EXAMPLE HERE
#parent_element {
text-align:center;
}
You usually only have to set a width on the element when it is a block level element and will be unaffected by text-align:center, (it would need margin:0 auto). Using text-align:center is probably the best method for centering, even if you have to change the display of an element to inline-block. Just be aware of the fact that inline elements respect whitespace in the markup.
Related
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
I have an image with float:left, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any overflow rules:
Here’s what I want:
Here’s a fiddle: http://jsfiddle.net/ZA5Lm/
For some reason, it was decided that overflow:hidden without an explicit height results in the element growing.
Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.
In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/
The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.
It's a bit tricky (I use relative + absolute positioning and a specific padding to position text) but it does the effect you asked without changing markup or setting height:
body {
padding: 10px;
}
img {
float: left;
position: absolute;
left : 10px;
}
div {
border: 1px solid black;
padding: 10px 10px 10px 280px;
position : relative;
overflow: hidden;
}
I just inserted style (even if float:left would be no longer necessary)
I seen a post over at CSS-Tricks and it talked about this. Go check it out at -
http://css-tricks.com/minimum-paragraph-widths/
It might be useful :) Good luck
Also just looked at your code and I added float: right to your div so it looks like this -
div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}
Not sure if that's what you want?
I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:
h3 {
background-color: #333;
color: white;
display: inline-block;
}
This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?
Assume I can use CSS3.
try this:
h3:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
display:block;
width:auto;
This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.
How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?
h3 ~ * { display: block }
The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.
I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.
Assuming this is your h3 styling,
h3 {
display: inline-block;
}
Then just wrap it in a div.
<div>
<h3>My heading</h3>
</div>
I've had to do something similar with inline nav items that need breaking at certain points. Does this work?
h3:after {
content: "\A ";
line-height: 0;
white-space: pre;
display:inline-block;
}
I seem to remember IE7 having an issue with it.
If you don't need to center h3, this may help:
h3 {
background-color: #333;
color: white;
display: inline-block;
float: left;
clear: left;
}
Total noob question, but here.
CSS
.product__specfield_8_arrow {
/*background-image:url(../../upload/orng_bg_arrow.png);
background-repeat:no-repeat;*/
background-color:#fc0;
width:50px !important;
height:33px !important;
border: 1px solid #dddddd;
border-left:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-left-radius:0px;
margin:0;
padding:2px;
cursor:pointer;
}
HTML
<span class="product__specfield_8_arrow"> </span>
Fiddle
Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not.
Thanks.
Span is an inline element. It has no width or height.
You could turn it into a block-level element, then it will accept your dimension directives.
span.product__specfield_8_arrow
{
display: inline-block; /* or block */
}
Try using a div instead of the span or using the CSS display: block; or display: inline-block;—span is by default an inline element which cannot take width and height properties.
Inspired from #Hamed, I added the following and it worked for me:
display: inline-block; overflow: hidden;
Span takes width and height only when we make it block element.
span {display:block;}
As per comment from #Paul, If display: block is specified, span stops to be an inline element and an element after it appears on next line.
I came here to find solution to my span height problem and I got a solution of my own
Adding overflow:hidden; and keeing it inline will solve the problem just tested in IE8 Quirks mode
spans are by default displayed inline, which means they don't have a height and width.
Try adding a display: block to your span.
Span starts out as an inline element. You can change its display attribute to block, for instance, and its height/width attributes will start to take effect.
Use this all problem solve way
Try it..
span.product__specfield_8_arrow
{
display: inline-block;
}
span {display:block;} also adds a line-break.
To avoid that, use span {display:inline-block;} and then you can add width and height to the inline element, and you can align it within the block as well:
span {
display:inline-block;
width: 5em;
font-weight: normal;
text-align: center
}
more here
There are now multiple ways to mimic this same effect but further tailor the properties based on the use case. As stated above, this works:
.product__specfield_8_arrow { display: inline-block }
but also
.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table
This JSFiddle shows how similar these display properties are in this case.
For a relevant discussion please see this SO post.
The way I deal with this is to use a borderless, read-only input tag and then you can set the attributes as desired:
<input type="text" readonly
style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;"
[value]="statusMessage">
i'm using a empty div to display a line by setting height 3px. it works fine in all browsers but in ie6 the height div displayed with 20px height. It remains same even for height:0px . But changes in other properties reflects but not height and there is no duplicate css entry and inherited value from other div. Can any one help please
<div id="line"></div>
CSS:
#line {
border: none;
background-color: #134c7c;
height: 3px;
margin-bottom: 20px;
}
Internet Explorer has the odd idea that the content of every element should be at least one character high. You can get around this by using the overflow attribute, that way the content can remain a character high, but it doesn't affect the height of the element itself:
.line { height: 3px; overflow: hidden; }
Try:
line-height:0
Just a wild guess.
Inspect whether there is any space inside the element. If yes then set the
font-size: 1px;
property of the element.
try with space in the div or
Just guess