I'm trying to center a group of fieldsets that I have, every example I find online tells me to use margin: auto; but that doesn't seem to be working for me. I've also tried grouping them into a div but that didn't work either.
Here is my CSS:
fieldset {
text-align: center;
margin:auto;
display: inline;
border-color: black;
border-width: 5px;
}
You can't use margin:auto when element is display:inline.
You should either make them display:block to repond to margin:auto or style their wrap element to text-align:center and then reset text-align in descendants.
Related
this is my css:
body {
margin: 0px;
background-color: white;
}
#navbar {
background-color: red;
margin: 0 auto;
width: 900px;
height: 200px;
}
#navbar a {
padding: 20px;
color: grey;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
navbar is a div inside body and i have a couple of tags inside navbar.
this is the output:
there is a difference between the 'Block level' elements and 'Inline Elements'. The Margins & Paddings of 'Inline Elements' effect only in Horizontal Direction, but not in Vertical Direction, as per the basic concept.
Your Div was a block level element, but anchor tag is an inline element. To give vertical space make it a block element, as you've already found out OR put the anchor in a div, which has vertical space in form of 'padding' or 'margin'!
div a {display:block;padding:20px;} OR div a{display:inline-block;padding:20px;}
In later two cases, padding will now effect in vertical direction also, as has now converted to block-level element, from inline form. Hope, that helps!
I figured it out, I just needed to use: display:inline-block;
you can try like this: Demo
#navbar a {
display:block;
float:left;
}
I have two inline block elements, and there is a margin between them that I can't seem to control.
How can I get the light blue element to touch the green element in the following JSFiddle?
http://jsfiddle.net/oregontrail/XvBa7/1/
.indicator {
display:inline-block;
width:100px;
height:50px;
text-align: center;
background: PaleTurquoise;
vertical-align: top;
}
.handle {
display:inline-block;
width: 50px;
height: 50px;
text-align: center;
background: limegreen;
}
replace display:inline-block with float:left in .indicator and .handle
Here are some possible solutions:
Fighting the space between inline block elements
Inline-block elements are being treated like words and thus are being affected by word spacing.
I answered a similar question here: CSS placing 3 blocks next to each other
the solution is to use a wrapper and set font-size: 0 then reset it in the elements or to eliminate any whitespace between the divs in the html. See the post for a more in depth answer
Im having trouble vertically aligning text inside a image button.
Vertical-align: middle doesnt seem to work.
Here what i got so far:
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:32px;
float:left;
text-align: center;
font-size: 12px;
list-style:none;
vertical-align: middle;
}
Simplest way to fix this is to give a line-height for the li same as that of its own height.
http://jsfiddle.net/KHBG4/
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("http://placehold.it/78x32");
float:left;
width: 78px;
height:32px;
text-align: center;
font-size: 12px;
list-style:none;
line-height:32px;
}
vertical-align can only be used with inline elements. That having been said, I know img tags are "inline-block" so not really sure what to expect there, but I don't think you mean to vertically align the img, but rather the text, so you need a separate inline tag (span would do fine) and use "position" and "vertical-align" to set it up right.
I have had a recent post about that very issue here:
How can I resize a background-image to fit my element (without set width) in CSS 2?
I would suggest the simplest route of giving your button padding-top (and reducing it's height by that number of course).
It's not truly "auto-centered", as it won't be centered if you change the height without updating the padding, but - it works and it's clean and easy, and simple to update.
Any idea why when I apply display: inline-block to an list element, the list-style-image stops appearing?
The most important style property for a list item is that its display defaults to list-item. That setting is the reason why the element gets displayed with the respective list-style. Setting display to inline-block removes the only thing about your list item that makes it a list item.
If you want a list element to use inline-block but still show bullets, you can use the ::before pseudo element and the content property:
li {
display: inline-block;
}
li::before {
content: '\25cf\a0';
}
( \25cf is the Unicode filled circle symbol and \a0 is a non-breaking space ).
You can use float:left; on your li element and add a min-width and min-height
.footer ul li{
float: left;
list-style-image: url(../images/arrow.png);
margin: 0px 0px 10px 0px;
box-sizing: border-box;
min-height: 38px;
min-width: 300px;
}
I need to make following code stretchable with predefined height
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
But since span is inline element, "height" property won't work.
I tried using div instead, but it will expand up to the width of upper element. And the width should be flexible.
What's a good solution for this?
Give it a display:inline-block in CSS - that should let it do what you want.
In terms of compatibility: IE6/7 will work with this, as quirks mode suggests:
IE 6/7 accepts the value only on elements with a natural display: inline.
Use
.title{
display: inline-block;
height: 25px;
}
The only trick is browser support. Check if your list of supported browsers handles inline-block here.
this is to make display:inline-block work in all browsers:
Quirkly enough, in IE (6/7) , if you trigger hasLayout with "zoom:1" and then set the display to inline, it behaves as an inline block.
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
Assuming you don't want to make it a block element, then you might try:
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
But the easiest solution is to simply treat the .title as a block-level element, and using the appropriate heading tags <h1> through <h6>.
span { display: table-cell; height: (your-height + px); vertical-align: middle; }
For spans to work like a table-cell (or any other element, for that matter), height must be specified. I've given spans a height, and they work just fine--but you must add height to get them to do what you want.
Another option of course is to use Javascript (Jquery here):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
In some case you may want to adjust a SPAN height without changing display : inline.
To solve this, you can add a top and/or bottom border property, setting the required width parameter to your needs, and a transparent color to hide that border :
.myspan {
border-top : solid 3px transparent;
border-bottom : solid 3px transparent;
}
.my-span {
border: solid 1px;
border-color: gray;
border-radius: 6px;
padding-left: 5px;
padding-right: 5px;
height: 17px;
padding-top: 6px;
display: inline-block;
line-height: 0px;
}
Why do you need a span in this case? If you want to style the height could you just use a div? You might try a div with display: inline, although that might have the same issue since you'd in effect be doing the same thing as a span.