I'm at a complete loss here. I've tried everything. Different displays, positions, floats... Nothing seems to work:
Markup:
<div id="today-leads" class="total-wrap">
<h2>Leads</h2>
<div id="leads-wrap">
<div id="leads-total" class="total">224</div>
<div id="leads-ticker-wrap"> <i class="icon-caret-up"></i>
<div id="leads-percentage-change" class="higher">56%</div>
</div>
</div>
CSS:
h2 {
text-align:center;
}
#leads-wrap{
display:inline-block;
margin: 0 auto;
}
#leads-ticker-wrap{
float:left;
}
#leads-total{
float:left;
}
Here's the jsfiddle
Which div?
leads-wrap won't centre because it is an inline-block not a block, so it is influenced by the text-align property of its containing block.
leads-ticker-wrap and leads-total won't centre because (a) they are floating left and (b) you haven't set auto margins on them.
Auto left/right margins only work when the element in question has a known width. So add something like
#leads-wrap
{
width: 65%;
}
Obviously you adjust the actual width to whatever you need.
Related
Greetings
I have serius problem, I need to move div in div in a div, but it doesn't work.
My question is if there couldn't be some problems with negative margins or child element of element with margin problem.
It seems negative margin is collapsing with positive margin in child element.
The margin of child element is moving parrent element.
here is fiddle
of my problem.
What I want to achieve is that:
a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.
b. Text is margined inside of an article div. From top.
<div class="container">
<div class="main-heading"><h1>Main Heading</h1></div>
<div class="wraper">
<div class="article">
<div class="text"><p>Text</p></div>
</div>
</div>
</div>
Also here is some of problem in css:
div {
width: 100%;
}
.container {
}
.heading {
}
.wraper {
margin-top: -100px;
height: 500px;
}
.article {
margin-top: 0;
height: 200px;
}
.text {
margin-top: 120px;
height: 50px;
}
As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.
Thank you verry much for your time
edit: picture of what I want to achieve
That black rectangle is wrapper,
cat is article
text is text, but the margins move whole article now.
I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...
I used
overflow: auto;
On parrent element, and it worked.
Based on your comment and what I think you're asking:
<div class="image">
<p>PRESTO</p>
</div>
.image {
display:block;
position:relative;
background-color:grey;
width:300px;
height:200px;
}
p {
display:none;
position:absolute;
top:0;
width:100%;
text-align:center;
color:orange;
font-size:2em;
}
.image:hover > p {
display:block;
}
FIDDLE:
https://jsfiddle.net/su5aqs3p/2/
Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.
http://jsfiddle.net/6x8Dm/
HTML
<div class="wrapper">
<div class="column">
<img src="http://www.lorempixel.com/200/200/" />
</div>
</div>
CSS
.wrapper {
width:200px;
margin:0 auto;
}
.column {
width:100%;
background:#cc0000;
}
img {
width:100%;
}
That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:
add a vertical-align:top rule to the image jsFiddle example
add font-size:0; to the containing div jsFiddle example
add display:block; to the image jsFiddle example
One way is by setting display:block on the img, causing it to fill the parent.
jsFiddle here - it works.
img {
width:100%;
display:block;
}
Alternatively, if you don't like that approach, you can also change the vertical alignment, as the default is baseline.
I have a form that I cannot center. I have tried many things including :
form{
display:inline-block;
text-align:center;
margin:auto;
}
the dang thing won't center though. help please?
URL: http://s1527.mtchs.org/wordpress/contact/
form {
width: 50%; /* adjust as needed */
margin: 0 auto;
}
Block-level elements are centred by setting the left and right margins to the same value - in general the easiest way to do this is to set them both to auto. text-align on the other hand, applies to inline elements inside the element you apply the style to.
See here for examples.
Playing around with margins should work. Set a top/bottom margin for your element and the rest auto and it should center it automatically.
margin: 100px auto 0 auto;
if you wanna use display: inline-block and text-align combination, then you have to put text-align in the parent element
example
<div style="position: relative; display: block; text-align: center">
<div style="display: inline-block">
</div>
OR
you can simply put width in the from css
form{
display:block;
margin:auto;
width:600px;
}
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
<div id="wrapper" style="height:400px;width:400px;">
<div id="example">
Text
</div>
</div>
I'm looking for a way to get #example into the center (left, right, top, and bottom) of #wrapper.
I think there are multiple ways to achieve what you want. One would be:
#wrapper{
display:table-cell;
width:400px;
height:400px;
vertical-align:middle;
border:1px solid red;
}
#example{
width:200px;
margin:auto;
text-align:center;
background:blue;
}
Demo: http://jsfiddle.net/SsD4Q/3/
I hope that helped somehow!
Try giving #example margin: 0 auto;
The second property is the left/right margin. Auto should center it.
Edit: Sorry that this does not center vertically. I misunderstood. Please see http://www.jakpsatweb.cz/css/css-vertical-center-solution.html for vertical centering.
Vertical alignment is a tricky one unless your using tables.
I suggest you read this aritcle on centering elements.
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Aligning horizontally however is easy...
Assign a width and use margin:auto
#example {width:100px; margin: 0 auto;}
<div id="wrapper" style="height:400px;weight:400px;">
<div id="vertical" style="height: 50%; width: 100%; margin-top: -25px"></div>
<div id="example" style="margin: 0 auto; height: 50px">
Text
</div>
</div>
Set the margin-top minus half the height of the example div
I don't like the current proposed solutions... as they rely on either displaying as table-cells, or using static heights on #example and negative margins.
Here is my proposal, considering #wrapper has fixed height:
Set #wrapper's line-height equal to its height;
Set #wrapper's text-align to center and vertical-align to center;
Set #example's display to inline-block, so it is centered vertically and horizontally but still works as a block;
Make #example a span instead, so IE8- allows it to be inline-block.
http://jsfiddle.net/aneves_sw/yse9w/