I want to center a fieldset in my page but I don't know how.
I used this css code :
fieldset
{
margin:auto;
display: inline-block;
text-align:center;
}
but it only center the content of the fieldset
I also used a <p style="text-align:center;"> <fieldset> ...</fieldset></p>
but it wont work.
so how can I center it ?
Edit :
The CSS code I'm using now :
fieldset
{
text-align:left;
display: inline-block;
vertical-align:middle;
}
div
{
text-align:center;
vertical-align:middle;
}
You will have to add text-align:center to the parent element (maybe wrap it in a div and play with it if it's by itself.) to actually center the element and not the content. See if that works.
Remove the display attribute. It needs to be a block element (which it is by default) for margin: auto to work. Or do you need it for something?
The solution is to position the element absolutely, offsetting the div by 50% from the left and the top part of the window and move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.
and this is the CSS code:
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
This worked for me
#fieldset{
border-color:blue;
border-radius:10px;
margin:-100px 0 0 -150px;
position:absolute;
left:50%;
top:50%;
}
But I do not the line margin:-100px 0 0 -150px;
Related
I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.
HTML
<div id="container">
<div class="test">one</div>
<div class="test">two</div>
</div>
CSS
.test {
display:inline-block;
clear: both;
border:1px solid;
}
#container {
clear:both;
text-align:center;
}
Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.
to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;
.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.
JSFiddle
You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:
.test {
position: relative;
border:1px solid;
width: 300px;
left: 50%;
margin-left: -150px;
}
You can see it in action here: http://jsfiddle.net/b8LuQ/7/
display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example
I have a div that is centered using margin: 0 auto; display: table;. The div is 960px wide.
There is another div inside this one. It is a search box and it is left-aligned in the top corner. But I would like this div to be left-aligned to the very left side of the browser window, meaning it would be visually outside or inside the main centered div depending on the browser window size. Is there a way to achieve this in CSS?
here a fiddle: http://jsfiddle.net/skunheal/5qT3p/
this would be the code:
#container{
margin: 0 auto;
display: table;
width:400px;
height:300px;
background:#111;
}
#searchbox{
position:absolute;
height:20px;
width:100px;
background:#f1f1f1;
left:0px;
top:0px;
}
hope this solves your problem
Just use position:absolute; left:0px; on the search box. See my jsfiddl (the container ID has shrunk so that it could fit in the JsFiddle window, but the concept should be sound): http://jsfiddle.net/CQ9cc/.
I have more than 100 divs on the page and each row has 3 divs. I want to remove left margin from first div and right margin from right div whereas center div should have 15px margin from left and right. Please guide me how can I do that without giving specific classes (no margin) on each div. Here is the example
here is my css code
.prp_box{
margin:15px 15px;
width:100px;
height:100px;
background:#5f03a6;
}
Check this out : http://jsfiddle.net/VHXEp/
Use nth-child(n) CSS3 selector.
You could try using the nth-child css selector.
#container:nth-child(3n+0)
{
margin-left: 0;
}
#container:nth-child(3n+3)
{
margin-right: 0;
}
This code might need a few adjustments, the 3n is how often, so every 3. The number after the + is where to start
Check the JsFiddle
http://jsfiddle.net/kpTdE/
.prp_box{
width:100px;
height:100px;
background:#5f03a6;
float:left;
}
.sec_box
{
width:100px;
height:100px;
background:#5f03a6;
float:left;
margin-left:30px;
}
.sec3_box
{
width:100px;
height:100px;
background:#5f03a6;
margin-left:260px;
}
I have the following HTML code:
<div id="inner">
<div id="wrap">
<img src="images/thumb/3.jpeg"/>
</div>
</div>
And the following style applied to it:
body{
background:url(pattern/pattern1.png);
}
#inner{
margin:0 auto;
position:relative;
height:400px;
width:400px;
background:#669;
text-align:center;
}
#wrap{
width:50%;
margin:0 auto;
}
The problem is that the image it always stay top-centered in inner div but i want it to be in center of wrap
!--------------------------------------------------------------------------
Still same problem and heres the code in jsfiddle: http://jsfiddle.net/RNhvz/
You should apply the margin to the image element directly: JSFiddle example1
Your margin: 0 auto is part of your problem.
Do you know the height of your image? I presume it is under 400px. Change the 0 in your margin style to half the difference between 400 and the height of your image.
For example, if your image is 200px in height, change your margin style to:
margin: 100px auto
(400 - 200) / 2 = 100
If your #inner is always going to have 400px height then just use this code:
#inner{
/* Your code: */
margin:0 auto;
position:relative;
height:400px;
width:400px;
background:#669;
text-align:center;
/* Solution part I. */
line-height: 400px;
}
/* Solution part II. */
img {
margin: 0 auto;
vertical-align: middle;
}
That way an image will be centred both vertically and horizontally and - what's more important - this solution doesn't require you to know the image size. And you don't need the #wrap div. You can keep in in your HTML syntax but there's no need for width and margin rules of this element.
Here's the working code: http://tinkerbin.com/YOjVvnVZ.
I need to Positioning a DIV tag in top of the page like in the StackEchange top menu bar
i used to following code but there is the space
div.topbar{
width:100%;
background:#C0C0C0;
border:1px;
border-color:gray;
border-style:solid;
text-decoration:none;
font-family:Arial;
top:auto;
}
You also need to add:
position: absolute;
top: 0px;
position: absolute is not needed if is the first child of the containing element. Just do a
margin: 0
padding: 0
and you'll have the added benefit of the next element in the flow positioned correctly after and not under the top bar.
add
div.topbar{
position:absolute;
top:0
}
Did you try adding position:absolute; and top:0;?
You may need to clear:both; the next element, though.