I have a div and I want to add a logo in its middle. If I write:
<div id="header">
<img id="logo" src="img/logo.png" title="Logo" />
</div>
#logo {
margin: 0 auto 0 auto;
width: 278px;
}
Nothing happens.
But if I make a special div for the image, like this:
<div id="header">
<div id = "logo">
<img src="img/logo.png" title="Logo" />
</div>
</div>
#logo {
margin: 0 auto 0 auto;
width: 278px;
}
It works, and the image is centered. Why?
Images are inline by default, so they won't respect that margin: auto off the bat. What you can do (without the extra div) is give text-align: center to the #header.
The reason the auxiliary div works is because you are wrapping the image in a div with the same dimensions, and being a block element, the div will respect margin auto and center itself.
this post may give you some help
It explains to you why you need wrap a div and how to do it without a div wrapper(but may have browser compatible issue)
Related
So, I need to get 2 images next to each other, but centered. I've gotten to figure out how to center an image, but not how to center two of them. The problem is in the CSS with display: block;, and display: inline-block; doesn't work - it's as if it's simply inline.
My code to center one image:
CSS:
img {
margin: 0px auto;
display: block;
}
HTML:
<h1>This Week's Photo Features</h1>
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
Use CSS.
<div style="text-align:center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
The previous answers are more-or-less correct, one solution is to put the images in a container and center the container:
div {
margin: 0 auto;
width: 220px;
}
Here's a fiddle to better demonstrate:
https://jsfiddle.net/boa5rej1/
Place both images in a container and center that container like this
<div align="center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
You can use Almost any container you like.
I administrative a site where there is a logo which is left aligned.
The HTML and CSS for that logo is looking like this:
HTML
<div class="logo-container">
<a href="#homePage.Url">
<img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="#logoAltText" class="img-responsive logo"/>
</a>
</div>
CSS
#mixin img-responsive($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
I have to make a Landingpage where the logo is centered. Therefore I thought on my landingpage I could do like so:
HTML
<div class="logo-container">
<a href="#homePage.Url">
<img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="#logoAltText" class="landingpage img-responsive logo"/>
</a>
</div>
CSS
.landingpage img-responsive logo {
margin: 0 auto;
}
is that incorrect?
To select a multi-class event, remove the spaces between the class selectors:
.landingpage.img-responsive.logo {
margin: 0 auto;
}
margin: 0 auto; is a good way to center a block-level element that is smaller than it's container element. However depending on your markup you may want to use text-align: center; on the parent.
img-responsive is a class, therefore you must use it with a . . .img-responsive and .logo and .landingpage are in the same class so you should remove space like this :
.landingpage.img-responsive.logo{
margin: 0 auto;
}
See the element element selector and the And selector
How do I get these pictures side by side with css I cant get it to work.
I tried everything but nothing is working for me and I cant find a tutorial for what I need on the web pls help me. and it has to be responsive.
HTML:
<div class="seizoenen">
<div class="container">
<img src="image/zomer.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/herfst.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/winter.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/lente.jpg" height="100%" width="25%" />
</div>
</div>
Here is a JSFiddle.
https://jsfiddle.net/bs3fz70v/2/
if you want it to be responsive...
Change img tags to max-width and set this in CSS. This will scale image down once it hits smaller screens.
Focus on your parent and child element structure. Your .container width should be set to 25%, not your img tag.
You mentioned text overlay in your comment. Set .container (parent element) to position: relative; Set any tag (child element) within that .container to position: absolute;. Now you can set top or left any value within 100% and contain it within that .container. And since the img tag is max-width:100%;, it will take on full width of that container, which is 25%.
Also set height to auto so images aren't stretched.
CSS
.seizoenen{
width:100%;
}
p {
position: absolute;
top: 50%;
left: 50%;
}
.container{
display: inline-block;
width: 24%;
position: relative;
}
img{
max-width: 100%;
}
Hope this gets you started experimenting with more positioning
Hoi bart, its quite easy to do. Your container needs to be display: inline-block; this will place the images next to eachother. And to fill the space of the images make them width: 100%;
Right fiddle now
One thing wasn't really clear to me you want the images to scale to a smaller size aswell?
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.
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.