It's my button:
<div id="body">
<button>Hello</button>
</div>
and its style:
#body{
width:400px;
margin:0 auto;
background:#eee;
border:1px solid #ccc;
}
button {
display: block;
margin: 0 auto;
}
It's centered, but let's see the result in ipad:
It shifts to left.
Take a look at this case: http://jsfiddle.net/c2HLe/9/
Note.
This is similar to my previous question, but in this case I made it with a simple structure, so I think people can focus better on the problem.
To center your button using margin: 0 auto;, you also need to define the width of the button. Something like this.
Alternatively, you can also use this.
#body{
text-align: center;
}
button {
display: inline-block;
}
In your original CSS, if the width of the container (margin+border+padding+content width) exceeds 1024px (iPad viewport width), you will get unexpected results. So make sure you keep that in mind.
Related
So on a website I'm making a have a navigation bar, I use this code for it.
<div id="container">
<span>Home</span>
<span>Blackmail</span>
<span style="color: #7CFC00">Keeping Safe</span>
<span>Cyberbullying</span>
<span>About</span>
</div>
However this navigation bar is wider than the others, exact same code (Apart from the colour, the colour shows what page you are on)
I would appreciate it if someone told me why this happens or how it could get fixed!
Website - nibble90.github.io
The page with the wider navigation bar is the keeping safe page!
Your #container menu has a fixed width (83em) and a padding. When your content is longer than the page height, it causes a vertical scroll bar to appear and your fixed width elements can't adjust to accommodate it.
You should set its width to be 100% with a min-width of something like 550px and its sizing to be border-box. This will mean it fits your page much more gracefully on different sized browsers and also auto-adjust to the presence or absence of the vertical scroll bar.
So:
#container{
width:100%;
min-width:500px;
box-sizing:border-box;
}
Replace the #container code by this one and it will works. It's better to use % or px instead of em for container width.
#container {
display: block;
width: 25em;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
width: 100%;
}
The width in your CSS is what is throwing you off. Remove the width and the divs will match in size.
#container {
display: block;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
}
Make sure to remove both because you had width in there twice.
Everything was going great until I attempted to text-align:center; my divs. Apparently divs that are floated left ignore text-align but the floated div needs to be that way to have two of the smaller divs on the same line as it.
It's hard to explain but here is an example of the code to describe it better:
https://jsfiddle.net/8fu5b9td/3/
.featured-series {
width:606px;
height:406px;
display:inline-block;
float:left;
margin:3px 3px 3px 3px;
background-color:black;
}
All I want to know is how to make the featured-series div act like the standard-series divs and centre itself at the same time. Thanks!
Remove the float:left; and add margin:0 auto; to it.
.featured-series {
width:606px;
height:406px;
display:inline-block;
margin:0 auto;
background-color:black;
}
Try this https://jsfiddle.net/8fu5b9td/7/
CSS
#media(max-width: 930px) {
.featured-series {
margin: 0 auto;
float: none;
}
}
#media(max-width: 610px) {
.featured-series {
background-color: black;
display: block;
height: 200px;
margin: 0 auto;
vertical-align: top;
width: 300px;
float: none;
}
}
I ended up fudging it with a little bit of JS. I know it's naughty but it does the job and it's fairly cheap on resources.
function centerContent(){
$('.center-content').width( Math.floor($('.body').width()/306)*306 );
}
setInterval( centerContent, 250);
.center-content has margin:0 auto; and it is the container for all of the series divs. I found that because I couldn't set the width, I really couldn't do much so I have JS set the width to the best possible fit depending on the screen size.
Not the cleanest solution and I'd much prefer pure JS but if it works, it works.
Edit: The .body class is an div which loads ajax inside of it, when it changes size it's basically like the changing size on a normal page.
i'm extremely frustrated right now. I can't figure out why my container won't extend to the bottom of the page. it reaches the bottom of the visible window, but if you scroll down past that, then the background ends.
my basic structure looks something like this...
<div id='container'>
<div id='content'>
/*Some Content here but all divs opened here are closed. (Title Bar, Nav, etc)
<div id='mainTableContainer'>
/*This is where a bulk of the code is. A table is generated in PHP and it
gets fairly lengthy.
</div>
</div>
</div>
So that's basically the HTML. I can't for the life of my figure out why #container won't
extend to the bottom of the page!
And the CSS
html{
height:100%;
}
body {
font: 100%/1.4 "Museo-sans", Verdana, Arial, Helvetica, sans-serif;
background: #ccc;
margin: 0;
padding: 0;
color: #000;
height:100%;
background-image:url(images/bg.png);
}
.container {
width: 960px;
background: #FFF;
height:100%;
margin: 0 auto;
border-left-style:dashed;
border-right-style:dashed;
border-width:1px;
border-color:#bf0000;
}
.content {
height:100%;
padding: 10px 0;
}
#mainTableContainer{
margin:0px auto;
width:90%;
height:100%;
text-align:center;
}
I tried a lot of the tips I found on this site, but nothing was helping. I don't think anything is floated. I tried setting all the heights to 100%, I tried setting a min width... I can't figure it out!!
EDIT:
OK I MADE A JSFILDDLE
So if you shrink the size of the display second in jsfiddle to smaller than the table, and then refresh it, you'll see that the background doesn't go all the way down, and the table is left 'floating' in the air.
http://jsfiddle.net/LGM3y/1/
You're trying to select a class, but container is an ID, so you need:
#container
instead of
.container
If that doesn't fix it try setting the background CSS on the HTML tag instead of the container.
html{
height:100%;
background:#ccc url(images/bg.png);
}
etc
It seems to work fine (if I understand exactly what you're asking) if you remove the
html {height: 100%;}
The container fills the space ..
One trick I use for this on <div>'s (which has mixed results in IE) is to specifically set display: block in the CSS rules for the container that you want to extend.
Example:
#container {
display: block;
height: 100%;
}
Here is the demo on JSFiddle.
I am using Twitter's Bootstrap framework - http://twitter.github.com/bootstrap/
What you will see in the stylesheet (on JSFiddle) is at the top are the appropriate classes from Bootstrap, but at the bottom are mine.
On JSFiddle, for some reason, everything doesn't look the way I want it to (I think it could be because of the static values and the smaller window on JSFiddle).
This is how it looks in my app:
However, the issue is that it works when I specify specific widths (in pixels) for everything.
What I want to happen is, the layout stays the same regardless of the size of the browser window (the image doesn't have to resize automagically, although if that can be achieved with no JS that would be cool). So, in theory, the layout wouldn't have broken once I took it into JSFiddle.
Any ideas?
You could do this:
First, get rid of the min-width that is set in the Twitter css
div.container-fluid {
float: bottom;
padding: 0px;
min-width:0; /* add this */
}
Second, give the .content div a fluid width
div.container-fluid .content {
border: 1px black solid;
margin: 0px;
width: 80%; /* adjust this */
float: left;
padding: 10px;
}
Third, float the items in your form
div.row.profile_pic div.span5 {
width: 120px;
float:left;
margin-right:1em;
}
div.span7{
width:40%;
float:left;
}
Of course, you will need to adjust the values. I just picked some random #s.
Example: http://jsfiddle.net/ytSjc/1/
I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>