I'm trying to center a fieldset containing the login "username" and "password" fields to the center of the page. Here is what I have:
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
float: left;
}
I want the fieldset to be centered in the window, regardless of window size. Googling produced nothing helpful, such as float: center or align: center attributes.
There is no float: center, only left and right. Float simply allows block level elements to line up horizontally by taking them out of their stack flow. It's similar to display:inline-block except it aligns them to the direction of the float.
What you want is to set the margins to auto. If you want to center align the nodes inside the fieldset, you can add text-align:center; to this:
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
margin:auto;
}
The element wrapping it likely needs text-align: center; on it, and then you need to set the margins on the fieldset;
fieldset{
//other stuff
margin: 0 auto;
text-align: left;
}
form
{
text-align: center;
}
Sample: http://jsfiddle.net/CKqxQ/
just remove float:left and add margin: 0 auto; because float:left keeps your element to left of the parent element. (Assuming parent element width is more than 400px;) your new css would be as below.
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
margin: 0 auto;
}
You can also put the fieldset like that:
<div style="text-align:center">
.......fieldset here........
</div>
Note: This affects also the alignment of the fieldset text, so if you want the text inside the fieldset to be aligned left or right, you can use:
<fieldset style="text-align:left">
Someone try this... actually,just use this coz it works!
fieldset {
font-size:14px; padding:5px; width:500px; line-height:1.8; margin: 0 auto;
}
Related
I'm trying to get the h1 text on the top center of the page, but when I add a border the width of the border extends the entire top part of the page. When I decrease of the width of the element using CSS the border pushes the text towards the left.
Before changing width
After changing the width
Demo :
JSfiddle
Remove float property and add margin: 0 auto to center h1 as it is a block element.
JSFiddle
Try pasting this in the css,
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
The changes made are: removed "float:center;" and added "margin:0 auto;"
Hope this helps.
You can use margin: 0 auto in your css like this
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
Hope this helps
The issue is with the float, there is no float for center, just left and right. Because you have declared a width you can use margin: 0 auto which will center your h1. Keep in mind that if you remove the width the margin: 0 auto will not work.
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
I have a div meant to contain all content on said site, an image I have nested into the div doesn't want to center and I'm not sure why?
here is the CSS.
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
}
#intro {
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
intro is the id given to said img, it just floats to the left of the div( id is wrapper) and wont center even though I have right and left margins set to auto?
The problem with margin: auto; is that it will only center block level elements ... and img is by default displayed as inline and follows the text flow (to the left). If you add display: block to it it should work:
DEMO
#intro {
display: block;
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
This way you don't need to centrally align the text of the wrapper element.
But if you want to center all inline children of the the wrapper - just use text-align:center on the #wrapper ... however then you may need to have line breaks before and after the images or some text could end up next to them and push them out of the center =)
DEMO
Use text-align: center on main container:
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
text-align: center;/*Add text-align center*/
}
I have spent countless hours yesterday and today to figure out how to do this. I cant believe CSS doesn't have an easy way to handle this.
Essentially, I have some text within a span class="name" whose length is not fixed. In certain instances, it can spill over to the next line. How do I vertically align this within my container.
More specifically, how do I vertically align "ABC Father And Sons Company LLC" within my container?
http://jsfiddle.net/D3L8S/
<div class="container">
<span class="name">ABC Father And Sons Company LLC </span>
Address
Hours
More
</div>
css classes
// CSS
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height:18px;
line-height:18px;
display:inline-block;
}
.name {
width:200px;
float:left;
}
.addr, .hours, .more {
width:60px;
float:left;
}
If I add a negative top margin to "name" (margin-top:-8px), I can achieve this but it obviously messes up rendering for XYZ Company LLC
http://jsfiddle.net/FM4dA/
The solution should ideally be Cross-browser compatible (atleast ie8 should support it)
EDIT - I forgot to mention initially that my container width is fixed and cannot be changed.
Here is one way of doing it using inline blocks:
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
display:inline-block;
}
.name {
width:200px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.addr, .hours, .more {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
First, make sure to leave enough vertical space for multi-line names, so on .container,
I used height: 50px and line-height: 50px.
However, you need to reset the line-height: 1 (or some suitable value) on the child elements otherwise the interline spacing will not be attractive.
Then, instead of floats, use display: inline-block and vertical-align: middle on the
child elements (.name, .addr, .hours, .more).
See demo at: http://jsfiddle.net/audetwebdesign/Wp84v/
Note: You may not need to specify the width on .addr, .hours, .more, so I let the
widths take on the shrink-to-fit value.
One way to vertically align div's contents is to use the vertical-align css property. But it works only on display:table-cell elements. So, wrap your container into a display:table div, and change the container display to display:table-cell.
Like this: http://jsfiddle.net/D3L8S/2/
Try this, It might help somebody
.name {
width:200px;
float:left;
margin-top:-8px;
word-wrap:break-word;
text-align: center;
}
DEMO
When you want to vertically center multiple lines, put the text into an inline block then pretend that the inline-block was a single line of text.
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height: 18px;
line-height: 18px
display:inline-block;
}
.name {
width:200px;
float:left;
margin-top:-8px;
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
NOTE:
Why you should add the line-height property ?
If you add height to an element , where exactly does the text inside of it lie? That is, if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up? Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space. But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly.
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;
}
Why is the text in this example: http://jsfiddle.net/7EYZe/ not in the vertical center?
How can I middle the text?
EDIT:
Now I have two or more lines of text:
http://jsfiddle.net/7EYZe/12/
How can I display this properly?
The following css will center text in a div by using padding instead of height:
.centerText
{
padding: 90px 0;
font-size: 18px;
border:solid 1px #000;
}
That's an incorrect use of vertical-align. It doesn't know what object to vertically align itself to.
Here is one dynamic, table-less solution: http://jsfiddle.net/imoda/7EYZe/14/
<style type="text/css">
div {
height:200px;
width:200px;
border:solid 1px black;
}
.aligner {
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.align {
display: inline-block;
vertical-align: middle;
}
</style>
<div>
<span class="aligner"></span>
<span class="align">blabla</span>
</div>
Add text-align: center; and display: table-cell; to center it in middle of the box.
div {
height:200px;
width:200px;
border:solid 1px black;
text-align: center;
vertical-align:middle;
display: table-cell;
}
The div is vertically aligned within whatever surrounds it. That doesn't affect what's inside. Make it smaller, in fact remove the width, and put it inside something bigger.
The thing is, vertical-align was mainly designed for specifying the behaviour of table-cells. Although the name suggests that any content shall be aligned in the middle, it simply does not.
You can find a very good article here about what vertical-align really is and how to achieve your intended purpose - aligning the text vertically inside your div.
Use line-height:200px, e.g.
div {
border:solid 1px black;
height:200px;
line-height:200px;
width:200px;
}
Also, in your example, you won't need vertical-align:middle. That style means that the div will be vertically aligned to its parent element. It doesn't mean the text inside will be vertically aligned.
This is way too much of a pain to do with a div. Use a table cell instead:
html: <table><tr><td>My Text</td></tr></table>
css: td { vertical-align: middle; }