The logo image at the top of this page http://54.251.57.136/ should center with:
.logo-img {
margin: 0px auto;
display: block;
}
... but it doesn't and I can't figure out why. Any help would be great.
Take off the float: left from logo-img and add text-align: center
Your div has a class .logo-img which is set to float:left. (and it would need a fixed width for the centering to work)
You are floating the image wrapper, if you adjust your css you can center it:
ADD THIS TO YOUR .logo-img
text-align: center;
REMOVE THIS FROM YOUR .logo-img
float:left;
What do you need to know:
Floated elements get off the normal document flow, so margin:0
auto; does not apply. You need to remove it.
margin:0 auto; on the .logo-img tag is not enough, you need to add
text-align:center; to allow the image to get centered.
Your logo-img class has a float: left
You must declare width on the div if you want it to center automatically with margin: auto. In this case width: 572px
Related
I'm trying to center images in a container but it is not working. Til sofar the css looks like this;
#wrap{
min-height: 100%;
}
#imagebar{
position:fixed;
margin:0 auto;
top:60%;
width: 100%;
height: 200px;
background: yellow;
}
#albums{
margin:8px;
display: inline-block;
}
My website is http://www.robcnossen.nl/
I thought that margin-left:auto;margin-right:auto; would be good but thinks are not working how I thought it would be.
Can anybody help me with this?
Thanks...
#imagebar {text-align:center;}
Your images aren't block-level elements, so simply applying text-align:center; to their parent will do the trick.
Since #imagebar has a width of 100%, its automaticly centered. You can center the images by using text-align: center within #imagebar.
I however think you want a specific 'content box' within #imagebar that is centered.
You can fix that by making a div inside #imagebar with a fix width (in px or %) and add margin: 0 auto to that inner div.
I have an iframe inside a div like this:
<section>
<div>
<iframe></iframe>
</div>
</section>
the iframe contains a youtube video in flash but that probably won't matter in this case.
I'm building a mosaic and is therfore trying to use the div to crop the iframe to an appropriate size.
this is done by
.section
{height: 251px;
width: 198px;
overflow: hidden}
Works great but I would like to center the video aswell. For images, I add them as background-images and use
background-size: cover
to center them. This is neat because they automatically rescale to maximum possible size. However this doesn't work for video. I would settle for simply centering the iframe vertically and horizontally, if possible.
Will adding this to your css help? It works if div is bigger than section.
section div {
margin-top:-50%;
margin-left:-50%;
}
http://jsfiddle.net/hvCXm/
Wrappping the iframe and use text-align: center; to align horizontal center
div {
text-align: center;
display: block;
}
or
iframe {
margin: 0 auto;
display: block;
}
Try:
iframe {
margin:0 auto;
}
The standard way to center block elements:
iframe {
display: block;
margin-left: auto;
margin-right: auto;
}
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
I feel like I am missing something easy or stupid. This is the only element on my page that I can't seem to center. I cannot seem to centerul#footer.
http://jsfiddle.net/w67rt/
To center the footer contents horizontally, just add the following CSS:
#footer {
text-align: center;
}
Demo: http://jsfiddle.net/mathias/GZ6xh/
If you’re looking to center the entire element, just give it a width and then use margin: 0 auto:
#footer {
width: 400px;
margin: 0 auto;
}
The width of ul#footer is undefined, so it uses the default width of "100%". I tried using width:261px, and then it does center.
I find two solutions:
both here, one is commented:
http://jsfiddle.net/AzNqm/
define width of ul, and center block with margin:auto
center inner li elements
Effect will be the same.
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.