I have some images on a page that I want to turn into links for projects that I have done but they don't seem to want to lay flush with one another.
.projectimage {
transition: 2s;
background-color:#FFF;
margin:0px;
padding:0px;
width:25%;
}
.projectimage:hover {
-webkit-filter: blur(4px) contrast(1.5) grayscale(0.4) sepia(0.2);
}
And here's the HTML.
<a href="#">
<img class="projectimage" src="../images/projects/texmex.png" width="25%" /></a>
I took all the margins and padding out so I have no idea on why it has spacing...
add display: block to your images. They are default to display: inline causing them to have an extra few px around them.
If you comment out the display: block, you can see the extra px at the bottom of the top images (even with display: block on the a tags).
DEMO
a {
width: 40%;
float: left;
}
img {
display: block;
width: 100%;
}
This is due to the nature of inline-block element surrounding whitespace. See the followinjg for an explanation and a number of solutions.
http://davidwalsh.name/remove-whitespace-inline-block
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
I need a gallery of images. Thereby it should be responsive. When there are too many images for one line, they should be displayed in the next.
That's what I have already implemented. My problem now is that the last line (when it has just one image for example) is centered, too. But It should be floated left.
I tried float:left, but this just makes everything float left and not center anymore.
Here is an JSFiddle-Example.
How can I have the last image float left?
HTML:
<div class="psAppWrapper">
<div ng-repeat="app in applications track by $index" class="psAppTile">
<img src="{{app.icon}}" class="psAppIcon"/>
<p class="psAppTitle">{{app.title}}</p>
</div>
</div>
CSS:
.psAppIcon {
width: 80px;
height: 80px;
}
.psAppTitle {
text-align: center;
}
.psAppTile {
width: 80px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.psAppWrapper {
width: 100%;
text-align:center;
}
EDIT
When I add float left it looks like this:
The red one is psAppWrapper. Here you can see that the images are not centered. The left ones have much less space to the left than the right ones to the right. The spaces should be the same.
This
.psAppWrapper {
width: 100%;
text-align:left; /* Changed this from text-align:center */
}
should align the last element to the left.
Nowadays, positioning block items via float: left; is considered bad practise. You should use display: flex; to align block items in the way you like. For the last row, use flex-wrap: wrap;. So you should end up with this CSS:
.psAppTile {
display: flex;
flex-wrap: wrap;
}
You can find explanations and more information on display:flex; here.
But I think that you'll need another technique, display: grid; might do the trick. I must admit that I've not yet used this for layout. [You can find a complete guide here.][3]
How can I shrink an anchor (green border) around a centered image of arbitrary (not specified) width? In other words, I want the seconds box with the green border centered, just like the first one. No floats, no absolute positioning.
Removing line (A) centers, but the anchor box remains elsewhere and cluttered.
Changing line (A) to block makes the anchor full-width
No luck with adding margin: 0 auto to the anchor either.
— No chance beyond a (slightly dodgy) text-align center?
Codepen
html
<img src="" width="123" height="100">
<hr>
<a href='#'>
<img src="" width="123" height="100">
</a>
css
img {
display: block;
background: #caa; /* red */
margin: 0 auto;
}
a {
display: inline-block; /* (A) */
border: 4px solid #aca; /* green */
}
If you are set against using absolute position, floats, specific width on the element, AND text-align: center (which is NOT dodgy in the least!), then your only other option is to fake a table.
img {
display: block;
background: #caa; /* red */
margin: 0 auto;
}
a {
border: 4px solid #aca; /* green */
display: table;
margin: 0 auto;
}
I still don't understand why text-align: center is dodgy...
Wrapping an image in another element merely transfers the centering requirement to the wrapper.
The image will now be centered in the wrapper (the anchor) due to the margin:auto...so you now have to center the wrapper.
BUT you want that wrapper to shrink-to-fit around the image. There are only a few ways on doing that AND centering the result.
Using text-align:center despite the link you mentioned which is seven years old is the optimal and most supported option.
I think you will find that support for text-align isn't even close to spotty any more.
If you want another non-float, non-positioned answer then it will be the less well supported flexbox option.
body {
display: flex;
justify-content: center;
}
img {
display: block;
background: #caa;
/* red */
margin: 0 auto;
}
a {
border: 4px solid #aca;
/* green */
}
<a href='#'>
<img src="http://lorempixel.com/image_output/city-q-c-123-100-3.jpg">
</a>
I have a series of images I want to distribute evenly across a div. I've seen many questions similar to this with very good answers, but many use padding/margins to achieve this, which leaves empty gaps on the left and right edges of the containing div.
Right now I'm applying a margin-right to each image, which works except for the very last image, which has an ugly empty gap on its right side. I could just apply a different class to the last image with no margin, but I'm hoping for a cleaner solution. What other options do I have?
#photo_bar {
margin-bottom:15px;
width:785px;
}
#photo_bar a {
margin-right:7px;
}
.photo_bar_image {
border-radius:9px;
background-size: 125px;
display: inline-block;
width: 125px;
height: 125px;
text-decoration: none;
transition: background-size 0.2s, background-position 0.2s;
}
.photo_bar_image:hover {
background-size:140px;
background-position: -5px -5px;
}
<section id='photo_bar'>
<a class='photo_bar_image'></a>
<a class='photo_bar_image'></a>
<a class='photo_bar_image'></a>
</section>
What about this one?
img:last-child {
// change the margin here!
}
This will be applied to the last image element in the container!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
Consider the following example: (live demo here)
HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is:
Why the black wrappers are not vertically aligned ? How could I fix that ?
The images are horizontally centered in the red boxes. How could I vertically center them ?
Please do not change the HTML, if possible.
Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)
Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Demo here.
Take a look at this:
http://jsfiddle.net/jESsA/37/
Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
.wrapper {
float: left;
}
http://jsfiddle.net/jESsA/3/
You could check this out: http://www.brunildo.org/test/img_center.html
may be this will help you
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me :)