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;
}
Related
So, I'm trying to align four images, two on top and two in the bottom. Together the four pieces form a map. To be even clearer: I sliced the picture of a map in four equal pieces, in PS, and now I want to put the pieces together in HTML code.
The code looks like this.
HTML:
<div id="container">
<img src="topleft.png" height="50%">
<img src="topright.png" height="50%">
<br style="clear:both"/>
<img src="bottomleft.png" height="50%">
<img src="bottomright.png" height="50%">
</div>
</body>
CSS:
img {
display:block;
float:left;
padding:0px;
margin: 0px;
position: relative;
}
#container {
border: 10px solid black;
height: 2000px;
width:1500px;
position: relative;
margin: 20px auto;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}
When I don't have the div around my images the size (height="50%") is correct and also the way they float: left to align with each other (except for where I used the br style="clear:both"/. But when I put them in a div the my size attribute doesn't work, and there is a line break after every picture, so they get stacked on top of each other.
Images are inline elements, just like text. Divs are block level elements that occupy the full width of the browser. You wrapped a block level element around an inline element. That is why your inlined images no longer work as you wish. Even floating won't fix the issue because the image is floated but the div occupies the full width.
One way to fix this is to set display:inline; or display:inline-block to your divs or you can float the divs.
you can try this one:
img {
display:inline;
float:left;
padding:0px;
margin: 0px;
position: relative;
}
#container {
border: 10px solid black;
height: 2000px;
width:1500px;
position: relative;
margin: 20px auto;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
display:inline;
}
DEMO FIDDLE
But when I put them in a div the my size attribute doesn't work, and
there is a linebreak after every picture, so they get stacked on top
of eachother.
When you put the images in a div they become wrapped in a block element, which a div is by default. Block elements use all available width of their container. So the divs will stack vertically.
The HTML height attribute doesn't work as you expect because when a percentage value is used the height isn't calculated in relation to the image size.
From the height attribute definition in the spec:
Note that lengths expressed as percentages are based on the horizontal
or vertical space currently available, not on the natural size of the
image, object, or applet.
To achieve your layout quickly, efficiently and using a modern (CSS3) layout technique, try this:
HTML
<div id="container">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
</div>
CSS
#container {
display: flex;
flex-wrap: wrap;
width: 250px;
height: 250px;
}
img { width: 125px; }
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
I have been playing around with div tag for sometime now and i tried doing the rounded corner div tag
<div id="y" style="border: 3px solid #000000;background: #b4ef05;
border-radius: 25px;width: 300px; height:200px;">
<div id="ds"style="width:100%; height:80%;border-top-left-radius: 2em;border-top-right-radius:2em; background: #b4ef05;"><span>
<img style="display: block; margin:auto;border: 0 none; position: absolute;left:40px;top:30px;" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg">
</span></div>
<div id="dscs"style="border-bottom-left-radius: 1em;border-bottom-right-radius:1em;width:100%;height:20%;background: #000000;color:#ffffff;"><span style="padding:35px;">sssd</span></div>
</div>
but i am not able to set the image alignment properly, this vertical-align:middle; doesn't work.
I need the image to come into the middle of the div automatically deciding the left and top. Also is this approach right to divide the div element into two to store 2 different values?
It's not good to use inline style in html elements :)
html
<img class="imgLackey" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg">
css
.imgLackey{
display: table-cell;
border: 0 none;
margin: 0 auto;
}
#imgCont{
display: table-cell;
vertical-align: middle;
}
#ds{
display:table;
}
fiddle
Display the parent (#y)as a table (display: table) and then set the span around the image as a table cell (display: table-cell).
This will allow you to use the positioning powers whilst keeping your code semantic.
See this updated codepen:
http://codepen.io/JRKyte/pen/ptaeI
Try adding display:table to the div that contain the image.
To the parent div of this image (id- 'ds') add "position:relative"
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.
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
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.