I tried to align the center of these elements in the contact page.
http://avocat.dac-proiect.ro/wp/?page_id=19
.contactform11 .wdform_section.{
/* margin-left:280px; */
/* margin-top:55px; */
margin:0 auto;
display:block;
width:auto;
}
Do not operate this and do not understand why.
I searched the forum and everyone said the information you need to set width and display block.
Can you help me to solve this problem?
Thanks in advance!
Width must be constant for margin to be auto.
Block elements have a default width of 100%, so auto margin doesn't make sense.
You can either make it an inline-block element (with a text-align set to center on the parent element), or simply define a specific width.
body {text-align: center;}
div {
background: #ccf;
margin: 4px auto;
padding: 4px;
border: 2px solid #99f;
}
#d2 {display: inline-block;}
#d3 {width: 200px;}
<div id="d1">Original</div>
<div id="d2">Inline-block</div>
<div id="d3">Specific Width</div>
in your contact page edit css as
.wdform_page {
text-align: center;
}
.wdform_section {
text-align: left;
margin: auto 0;
}
Related
I am building a two column layout and I want to keep the total column inside a wrapper in the center of the screen even if it's resized. I have tried floating some CSS divs but not helping.
This is my layout:
<div class="wrapper"><div class="leftCol">Left</div><div class="rightCol">Right</div></div>
CSS:
.wrapper{ width:720px; text-align:centre;}
.leftCol{ width:200px; float:left;}
.rightCol{ width:510px; float:right;}
All you need to do is set the wrapper as such
CSS:
.wrapper { width:720px; margin:0px auto;}
Furthermore I would recommend using a bit more responsive CSS with percentage to fit with the width as well, so that it doesn't look really tiny on larger screens.
You can try the margin trick here on the wrapper class.
.wrapper{ width:720px; margin: 0 auto; }
Please try below css
.wrapper{ width:720px; text-align:centre; margin: 0 auto;}
.leftCol{ width: 30%; margin: 0 auto; display: inline-block;}
.rightCol{ width: 70%; margin: 0 auto; display: inline-block; }
Float removes your children DIV elements from a static document flow.
DIV elements being block-level elements, unless set as inline or inline-block will not in any case apply to the parent's text-align property.
You have more possibilities, the most common are:
.wrapper{
width: 720;
margin: 0 auto; /* keeps me centered */
overflow: auto; /* to contain floated child elements.
Or use a .clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
}
or using text-align: center;
.wrapper{
width: 720;
margin: 0 auto; /* keeps me centered (use anyways) */
text-align: center; /* my children are not block-level elements */
}
.leftCol{
display:inline-block;
width:200px;
/* text-align: left; probably you might want to reset text alignment */
}
.rightCol{
display: inline-block;
width:510px;
}
I would discourage you from using (in 2016.+) fixed widths. Use another more responsive unit like % or vw
For some reason, margin:auto is not working.
HTML
<body>
<div id="background">
<div id="header">
<div id="title">Welcome</div>
</div>
</div>
</body>
CSS
#background {
min-width: 960px;
}
#title {
display: block;
margin: auto;
background-color: blue;
}
This just just draws a blue line across the top of the screen with the word 'Welcome' on the left. Why isn't my margin:auto working?
The correct syntax for horizontally centering via margin is: margin: 0px auto; as this will set the left and right margin to auto. You need to set a width on it if you use this approach, because the width is 100% by default.
Alternatively, you can also use text-align:center if you are just centering text.
Working jsFiddle using text-align:center.
Alternative jsFiddle.. I don't know what style you are trying to achieve.
The #title div will expand to fill its parent, #header, which in turn, expands to fill its own parent, #background, which has a width of at least 960px.
Therefore, #title if full width so it is centered, and by default, the text is left justified (at least in Western European languages).
If you want the #title to have a shrink-to-fit width, you can try display: inline-block.
To center #title horizontally, add text-align: center to its parent container, #header.
For example:
#background {
min-width: 960px;
}
#header {
text-align: center;
}
#title {
display: inline-block;
background-color: beige;
}
Alternatively, you can achieve the same result using display: table:
.ex2 #header {
text-align: left;
}
.ex2 #title {
display: table;
margin: 0 auto;
background-color: beige;
}
See demo at: http://jsfiddle.net/audetwebdesign/kAhnx/
How to center several boxes in CSS? Suppose I have a div "navigation". Now, the navigation margin is auto, that is, it is in the center, how would I add lists(display:inline) inside navigation that will expand navigation on both sides. I haven't set the width property so the width will be dynamically expanding. Its like float :center.
Set margin:auto and width:940px and you are done. You can change width as per your need. But giving some width is compulsory.
Check this fiddle and tell me if it helped you.
http://jsfiddle.net/JNMZ3/4/
You can change padding of the li elements for more space. And then adjust width of the navigation div to keep it in center.
try this
your css replace with
http://jsfiddle.net/JNMZ3/3/
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 100px;
background:red;
float:left;
}
.rightsidebar {
background:blue;
height: 608px;
width: 100px;
float:right;
}
.content {
width: auto;
margin:0 auto;
background:yellow;
height:608px;
}
I'm stuck with this its the problem
<div id="example1">
<div id="example2"> </div>
<div id="example3"> </div>
</div>
I need to align the div with id example3 under example 2 and if it's possible just in the footer and center of the div with id example1. how can i do it?? i have days trying and more close it's like this.
CSS
#example3{
margin-left:auto;
margin-right:auto;
margin:0;
height:80px;
position:absolute;
top:170px;
}
#example2{
height:153px;
width:305px;
float:left;
background:url(Logo.png);
}
thanks for your help
For one thing, position:absolute won't let you set margins.
For another, you've got
margin:0;
which is resetting your auto on the left+right. Try
margin:0 auto;
Here's a JSFiddle which accomplishes what you're trying to do (more or less).
EDIT
OK, but now you've now introduced a third problem, in the float:left, which will override the auto margin and always float left.
Also, the problems I mentioned above haven't been addressed. To summarize: no floats, no absolute positions, and try not to override the margin by styling it twice.
Are you trying to have a 17px space between #example2 and #example3? Here's an updated link, evolved from the last one, that does this new behavior: JSFiddle
Going by the CSS you have I think you need to swap the div that's absolutely positioned to the "logo" (#example2), then you can just margin the top of example 3 to get the top 170px spacing
Example : jsfiddle
try:
#example1{
background: #eee;
height: 250px;
position: relative;
overflow: auto;
}
#example2 {
background: #444;
color: #fff;
position: absolute;
top: 0;
left: 0;
height:152px;
width:305px;
}
#example3 {
background: #007;
color: #fff;
width: 300px; /* adjust to suit */
height: 80px;
margin: 170px auto 0 auto;
}
if you don't know the width of #example3 - and so can't use the auto left and right margins - then you can center it another way by changing it to display: inline-block and setting text-align: center on #example1
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}