Before you attempt to solve this please carefully read the constraints I'm dealing with.
Constraints
.pictureContainer needs to remain position: relative (because I have a hover menu that positions absolutely relative to it.)
The image could be smaller than 80% of #slide in which case it still must align in the center. What this translates to? You can't simply do a margin: 0 10% because yes that would center this specific case, but it will not satisfy the case where the image is smaller than 80% of the width of #slide
Hello, I am inline-block element that is positioned beside another inline block element, isn't that wonderful? I think that is wonderful!
Why not simply add:
text-align: center;
to pictureContainer css declaration. It will center any image in it.
firts try to wrap your div class="pictureContainer" and give css to the wrapper
html
<div class="wrapper">
<div class="pictureContainer">
<img id="currentPic" class="slideShowPic" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" width="350" alt="IMAGE" />
<div class="hoverMenu">
<a class="nextSlide" href="#">
>
</a>
<a class="prevSlide" href="#">
<
</a>
</div>
</div>
</div>
css
.pictureContainer {
width: 350px;
position: relative;
background: red;
padding: 0;
margin: 0;
}
#currentPic {
vertical-align: top;
}
.wrapper {
margin:auto;
width: 350px;
}
working demohope this help
Like the answer from #jhunlio suggests:
create a wrapper around it with the follwong css
.wrapper {
margin:auto;
width: 600px;
}
The trick here is that the width is fixed and the margin is set to auto.
It means that the margin (outer space) will be equally distributed at the sides of the wrapper with the fixed width. Hence it is in the middle.
Related
JSFiddle link -Code
I have wasted an hour on this stupid problem. I have made projects and it worked. I deleted that code in rage.
I wanted to center an image but there was a heading above the image. So, i wrapped them in a div and gave them a id[x].
What i tried #x - margin:0 auto width:50%; margin:auto; width:50%; margin: 0 auto; width:50%; margin-left:auto; margin-right:auto; and changing positions to relative.
What worked [not wrapped in a div] -
img {
display:block;
height: 200px;
width: 200px;
margin: auto;
}
h1 {
color:blue;
text-align:center;
}
But this code had a problem as the image is clickable, the whole width of where the image was became clickable, i don't know why.
You cannot have a block element inside an inline element. The anchor that the image would be wrapped in is an inline element. When you turn the child into a block element it will make the anchor take the entire width of the line, because you don't have a width setting on the anchor.
To fix this issue, display:block; should be display:inline-block;
Use text-align: center to center the image.
#test {
text-align: center;
}
img {
display: inline-block;
height: 200px;
width: 200px;
}
h1 {
color:blue;
}
<div id="test">
<h1>Hi, I am guy!</h1>
<a href="#">
<img src="//lorempixel.com/200/200">
</a>
</div>
if I understand your problem you want to both center the header and image that are wrapped in a div. You do not want the entire area of the div clickable just the image. Below is a fiddle.
If the above is correct it seems you just need to add the a tag around the img tag and not the div itself.
<div>
<h1>Header</h1>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" />
</div>
https://jsfiddle.net/gward90/7s45osxa/
UPDATE:
display: block will take up the width of the parent element everytime, as others have said use inline-block.
Only apply size to the img tag, and apply display to the a tag. The wrapper class with text-align: center is actually taking care of centering the img as well.
Here is the updated fiddle:
https://jsfiddle.net/gward90/7s45osxa/3/
Here is also your fiddle updated with my suggestions
https://jsfiddle.net/gward90/aLxecdk6/5/
So,
i'm guessing this has been asked before but im realy missing something here which i've been starring myself dead at for the last hour.
I've got a container with two divs, position relative and absolute since i want them to stack. The stacking part works. However, this container, the #mockupcontainer, needs to be inside the #what-container-inner which i cant seem to get to work. At the moment it just stops the #what-container-inner and placed the #mockupcontainer after it. My jsfiddle illustrates perfect whats going wrong. I hope someone can help me on this one.
https://jsfiddle.net/rvq41vaf/
CSS:
#what-container-outer {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}
#what-container-inner {
background-color: #ececec;
width: 75%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.mockupcontainer{
position: relative;
}
#pin-mockup{
position: absolute;
z-index: 10;
}
#pin-mockup-site1{
position: absolute;
z-index:11;
}
HTML Code:
<div id="what-container-outer">
<div id="what-container-inner">
sdfsdfsdfsdfsdfsdfsdfsdf<br>sdfsdfsdfsdfsdf
<div id="trigger-mockup"></div>
<div class="mockupcontainer">
<div id="pin-mockup">
<img src="image2" class="img-responsive" alt="Realiseren">
</div>
<div id="pin-mockup-site1">
<img src="image1" class="img-responsive" alt="Realiseren">
</div>
</div>
</div>
</div>
Kind Regards,
Donny.
Since you have your two image-containing divs (pin-mockup and pin-mockup-site1) positioned absolutely, they are pulled out of the flow and the enclosing divs no longer leave room for them. The solution is to set the larger one to position: relative so that the enclosing div does make room for it. Setting top:0 on the second (absolutely positioned) div brings it to the top of the enclosing div.
Here's the fiddle.
See also the MDN docs on the position property.
Embarrassingly, I'm having trouble making one div (of any length) centered and one div (of any length) floating on the right. So I have a container with menu buttons that are centered and a link to the users control panel on the right. It should look something like this
----------------------------------------------------------------------------
| |----Menu Items----| |--ControlPanel--|
----------------------------------------------------------------------------
I know, this question has probably been asked a few times but I've searched through and through and they all seem to rely on percentages or fixed widths.
I have a container
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
float:right;
}
The html is like this
<div class="container">
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
<div class="controllinks">
A link the users control panel
</div>
</div>
By changing menublock and controllinks to display:inline-block (or inline) I can get them on the same line just fine. .menublock does not seem to like being centered in this display and margin: 0 auto; doesn't work. I was messing around with .menublock display:table but that didn't want to stay on the same row.
Maybe it was too easy so you didn't even try it, but this fixed the thing in my test file: Just swap the order of <div class="controllinks"> and <div class="menublock">:
<div class="container">
<div class="controllinks">
A link the users control panel
</div>
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
</div>
An easy solution is to use absolute positioning.
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
/*this makes the child divs relative to the parent*/
position:relative;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
/*this puts the controllinks on the right.
Be warned, that if the page is too small, controllinks can no overlap on menublock.
This can be fixed with media queries.*/
position:absolute;
right:0px;
}
Both Merlin's and James' solutions worked well. They all achieved the same result.
Another solution I just found was adding text-align: center; to the .container class. It turns out inline elements respond to text-align (although it seems strange to think of divs in this way).
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I am trying to have 3 images aligned in one block. They have to stay in the same sized container and fit horizontally.
Here's the code:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 100%;
height: auto;
margin: 5px;
}
In my CSS solution, I divided the "container" class width by 3 (300px /3) and then subtracted 10px (which i got from padding-left and padding-right of each image). So a single image should have a width of 90px. However, I also wanted to subtract 5px more for browser spacing so the total width of each image should be 85px. Here is the code:
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 85px;
height: auto;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
</body>
</html>
Hm...I don't think you can have all three images in a horizontal line if you give them all a width:100%. That property would cause each image to take the full width of the container, meaning each image would be pushed to the next line.
You'll have to give the images a smaller width to fit them all on one line. 100% / 3 = 33.3% (rounded), so use that instead. Here's some modified CSS for .container img that seems to work:
.container img {
width: 33.3%;
height: auto;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Note that in addition to changing the images' widths, I also changed the margin to padding, and made use of the box-sizing attribute (read more about it here). This lets you keep that same spacing of 5px around images, without bumping any images onto a second line.
Also, the HTML needs to be altered slightly. In this case, we're taking advantage of the <img> element's default display:inline-block to have them all display on the same line. However, any whitespace in between this kind of element will result in a space between the images, so that needs to be eliminated:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
If you don't understand what I mean by that, try formatting each <img> element onto its own line in the HTML, and see how that affects their positioning.
Here's a JSFiddle so you can see what this achieves. Let me know if you have any questions, and I'll be happy to help further!
EDIT: Alternatively, if you really want to keep the whitespace between your <img> elements in your HTML, you could compensate for the unwanted extra space with a negative margin. Just add margin-right:-4px; to your styles for .container img. Updated JSFiddle to show what this results in.