I want the text below my images to fit exactly below them. Longer texts continue in the same line which is not I want. I want it to go to the next line and stay below the corresponding image.
I also tried using break-word and aligning center but it doesn't work.
.row div {
display: inline-block;
padding-left: 5%;
padding-right: 5%;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-align: center;
}
<div class="row">
<div>
<a href="#">
<img src="martial.png">
</br>Manchester United 2015-16 Martial kit
</a>
</div>
<div>
<a href="#">
<img src="ars.png">
</a>
</div>
<div>
<a href="#">
<img src="bvb.png">
</a>
</div>
<div>
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
You gonna have to add additional div container for every image and link.
See the example below:
.row div{
display: inline-block;
padding-left: 5%;
padding-right: 5%;
}
.row div img{
max-width: 100%;
max-height: 100%;
}
.row div a{
word-wrap:break-word;
text-align:center;
}
.img-container{
display: inline-block; /* added */
float: left; /* added */
text-align: center; /* added */
}
<div class="row">
<div class="img-container">
<img src="http://i3.mirror.co.uk/incoming/article6363634.ece/ALTERNATES/s615b/Anthony-Martial-signs-for-Manchester-United.jpg"></br>Manchester United 2015-16 Martial kit text aded text aded text aded text aded text aded
</div>
<div class="img-container">
<img src="ars.png">
</div>
<div class="img-container">
<img src="bvb.png">
</div>
<div class="img-container">
<img src="lewandowski1.png">
</div>
</div>
If you want to set a predefined width and height you can do it adding rules to .img-container class. Other way it will take the image dimensions. And for centered links just add this rule to .img-container class:
text-align: center;
just give your inner divs a width
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.row div {
border: 1px solid black;
width: 40%;
display: inline-block;
padding-left: 5%;
padding-right: 5%;
//overflow: auto;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-align: center;
}
</style>
</head>
<body>
<div class="row">
<div>
<a href="#">
<img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
</div>
<div>
<a href="#">
<img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
</div>
</div>
</body>
</html>
Use the min-content property on the element containing the img and caption. In this demo, I used the figure and figcaption (and main) elements instead of divs to create semantic layout. It'll work the same way if you prefer `div's instead.
.row figure {
display: inline-block;
padding-left: 5%;
padding-right: 5%;
/* min-content needs to be prefixed */
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
.row figure img {
display: inline-block;
/* Changed max-* to min-* to demonstrate images in different sizes */
min-width: 100%;
min-height: 100%;
}
.row figure a {
word-wrap: break-word;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Captions</title>
</head>
<body>
<main class="row">
<figure>
<a href="#">
<img src="http://placehold.it/300x150/9a7/a10.png&text=Manchester+United+2015-16+Martial+Kit">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/100x50/fd3/b0d.png&text=ARS">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/200x100/fa8/375.png&text=BVB">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/400x200/048/Fee.png&text=lewandowski1">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
</main>
</body>
</html>
Related
It seems no matter what I do, I cannot get my images to line up in height. Am I missing something? Originally all images were varying sizes, but I adjusted the resolution in a photo editing software so they are all the same height (1500px) and, for added reinforcement, I have put the height in the image tag as well, yet they are still not lining up and seem to retain their original height/size. It is not a file naming issue as I have checked and double checked these are correct.
Is it a max-width vs max-height issue? They either need to line up uniformly in width or in height, and can't be both unless the images are the exact same sizes? This is my HTML and CSS. I am using a framework called "uiKit" (https://getuikit.com/) and have included its applicable CSS in the code below.
html,
body {
margin: 0;
background-size: cover;
}
.wrapper {
margin-top: 75px;
}
nav {
padding: 25px 25px 75px 175px;
}
address,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
margin: 0 0 0 0!important;
}
li {
list-style-type: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
}
.nav-right {
display: flex;
font-size: 0.875rem;
color: #999;
}
.leftnavpadding {
padding: 0px 0px 0px 20px;
}
footer a {
color: purple;
}
/*Photos page*/
.photoswrapper {
margin: 75px;
}
.photo-grid-padding>* {
padding: 0!important
}
.uk-lightbox-toolbar {
padding: 10px 10px;
background: rgba(0, 0, 0, 0.0);
color: rgba(255, 255, 255, 0.7);
}
.uk-lightbox {
background-color: white;
}
#photomenuwrapper {
padding: 10px;
}
h3.photolink:hover,
.photolink:active {
color: white;
}
/*footer*/
footer {
padding: 150px 100px 100px 100px;
}
.footersocial {
width: 100%;
display: flex;
justify-content: center;
}
.uk-child-width-1-2>* {
width: 50%;
}
.uk-grid {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
}
[class*='uk-inline'] {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
/* 5 */
-webkit-backface-visibility: hidden;
}
<div class="photowrapper">
<div class="photo-grid-padding uk-child-width-1-2#l" uk-grid>
<div>
<a class="uk-inline" href="houses.htm">
<img src="img/houses/houses01.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">houses</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="yangshuo.htm">
<img src="img/yangshuo/yangshuo1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">yangshuo</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="nature.htm">
<img src="img/nature/nature1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">nature</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="buildings.htm">
<img src="img/buildings/buildings1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">buildings</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="lasvegas.htm">
<img src="img/lasvegas/lasvegas1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">lasvegas</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="tripinterrupted.htm">
<img src="img/tripinterrupted/tripinterrupted2.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">trip interrupted</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="otherstuff.htm">
<img src="img/otherstuff/other1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">other stuff</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="design.htm">
<img src="img/design/infographic.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">design
<h3>
</div>
</a>
</div>
To let you know: I tried this suggestion:
https://codepen.io/blimpage/embed/obWdgp?default-tab=result&theme-id=dark
and the images lined up perfectly on a test page with no framework added.
But unfortunately when I inserted that solution into my page with the framework, and specifically when I put the display: flex style in the div around my rows in the grid it messed up the alignment of both the framework and the attempted solution, and neither was then working as they should have been.
I have put the HTML and CSS for that attempted solution below.
Any info or knowledge that would make my images align up in their height to create a clean row would help me out. Please if someone could let me know if I am missing something! Also, am a DIY beginner coder, please be gentle with me, I still have lots to learn!
img {
width: 100%;
height: auto;
vertical-align: middle;
}
.picsinarow {
display: inline-flex
}
}
.container {
background: white;
margin: 0 auto;
padding: 5%;
width: 75%;
}
.b1 {
flex: 1.3431
}
.n1 {
flex: 1.3333
}
<div class="photowrapper">
<div class="photo-grid-padding uk-child-width-1-2#l" uk-grid>
<div class="picinarow">
<a class="uk-inline" href="houses.htm">
<img src="img/houses/houses01.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">houses</h3>
</div>
</a>
</div>
<div>
<a class="uk-inline" href="yangshuo.htm">
<img src="img/yangshuo/yangshuo1.jpg" height="1500" alt="">
<div class="centered">
<h3 class="photolink">yangshuo</h3>
</div>
</a>
</div>
<!-- end of pic in a row -->
</div>
<!-- end of photowrapper -->
To be clear, I am no longer using this code as it caused problems once I tried to integrate it into the uikit framework I am using.
Thank you so much!!
I have a div for slick slider, product card to be exact.
It should be displayed inline, and picture should be the whole size of the card-info.
.product-card__item {
display: flex;
width: 100%;
min-height: 450px;
}
.product-card__item-preview {
flex-basis: 48.5%;
height: 100% width:100%
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card__item-info {
width: 51.5%;
background-color: #fff;
padding: 1.2em;
}
}
```
<article class="product-card">
<div class="product-card__preview">
<img class="product-card__img" src="https://via.placeholder.com/150" alt="">
</div>
<div class="product-card__info">
<div class="product-card__info-top">
<a class="product-card__title" href="#">
One Page Resume Template
</a>
<div class="product-card__author">
<img class="product-card__avatar" src="https://via.placeholder.com/50" alt="user avatar">
<a class="product-card__top-name" href="#">
AazzTech
</a>
</div>
</div>
</div>
</article>
but with even slightly resizing the window for adaptation, picture starts doing this:
I know it could be fixed easily if I make amg as a bg for preview div, but how is it possible with img tag?
I dont have your code, but you can try this:
.container{
display:flex;
height:500px;
}
.container > div{
flex: 1 1 0;
overflow:hidden;
}
.second img{
height:100%;
}
.first{
background-color:red;
<div class="container">
<div class="first"></div>
<div class="second">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg" alt="">
</div>
</div>
I'm designing a very basic website only with HTML and CSS.
In the design, I added some icons, which are images. These images I've added them in my HTML. I want to create a hover effect with another image. Any thoughts?
Here is my HTML and CSS
.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
.view-icon,
.edit-icon,
.delete-icon {
width: 50px;
height: 50px;
display: inline-block;
padding: 10px;
}
<div class="card one">
<img class="avatar" src="images/avatar-01.jpg" alt="Foto Felipe Kaiser">
<p class="name">Felipe Kaiser</p>
<p class="position">Periodista</p>
<hr>
<div class="icon-group">
<div class="view-icon">
<a href="#">
<img src="images/view-icon.png" alt="Icono ver">
</a>
</div>
<div class="edit-icon">
<a href="#">
<img src="images/edit-icon.png" alt="Icono editar">
</a>
</div>
<div class="delete-icon">
<a href="#">
<img src="images/delete-icon.png" alt="Icono delete">
</a>
</div>
</div>
</div>
To add a different behaviour of css while hovering any item, you have to define this behaviour and add :hover to the container id/class. In your exemple, it may be :
.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
.icon-group:hover {
background-color: grey;
}
for exemple
I am trying to center an image using CSS and Im pretty sure I am using the correct selector in CSS because I have resized the image, but I cant get it to align properly.
My HTML:
</br>
<div class="copyright">
<em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
</div>
</br>
<div class="sponsors">
<a href="https://craneflight.org">
<img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb" />
</a>
</div>
Here's what i tried for CSS:
.sponsors>img {
display: inline-block;
vertical-align: middle;
}
.sponsors>img {
display: inline-block;
vertical-align: middle;
}
img.thumb {
width: 100px;
height: 150px;
}
</br>
<div class="copyright">
<em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
</div>
</br>
<div class="sponsors">
<a href="https://craneflight.org">
<img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb" />
</a>
</div>
and
.sponsors>img.align-center {
display: block;
margin: 0px auto;
}
.sponsors>img.align-center {
display: block;
margin: 0px auto;
}
img.thumb {
width: 100px;
height: 150px;
}
</br>
<div class="copyright">
<em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
</div>
</br>
<div class="sponsors">
<a href="https://craneflight.org">
<img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb align-center" />
</a>
</div>
I am trying to get the image to align at the bottom of the page below where it says "TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED", but I just can't figure it out. I have looked through multiple similar questions and none of the other solutions seem to be working in this case. Could it be I am not using the selector properly?
EDIT: I have the image resized with the "thumb" class selector because there will be several images and they will all need to be the same size. Here's the code:
img.thumb {
width: 100px;
height: 150px;
}
You can try to apply the style to the container DIV.
.sponsors {
text-align: center;
}
Try to aligning it with the div:
<div class="sponsors" align="center">
<a href="https://craneflight.org">
<img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb"/>
</a>
</div>
I added a container around both elements and made that an inline-block (so it would be only the width of its contents and stay left) .
Then I centered the image inside that container by applying text-align-center to the .sponsors DIV . I also centered the top line to be center aligned with the image using text-align: center.
BTW: You had a wrong CSS selector for the image. There is an a tag between the div and the image, so .sponsors>img won't have any effect. Either .sponsors>a>img or just .sponsors img
.container1 {
display: inline-block;
}
.copyright {
text-align: center;
}
.sponsors {
text-align: center;
}
.sponsors img {
width: 100px;
height: 150px;
}
<div class="container1">
<div class="copyright">
<em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
</div>
<div class="sponsors">
<a href="https://craneflight.org">
<img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb" />
</a>
</div>
</div>
I have a layout and i'm trying to add in a row of images that will sit underneath the 'just arrived' section and no matter what i try the images keep flowing underneath each other.
Can anyone see what im doing wrong? Thanks!
That's because <li> elements are display: block by default. Give them float: left and you're all set.
.wrap {
float: left;
}
I have written a small code for you. check this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: auto;
}
div.imagecontainer
{
width: 100%;
height: auto;
}
div.imagecontainer ul {
width: 100%;
height: 100%;
padding:0;
}
div.imagecontainer ul li{
list-style-type: none;
width: 20%;
height: 200px;
float: left;
}
div.imagecontainer ul li img
{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="imagecontainer">
<ul>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-Blaithin_f3f568d3-849a-4271-a640-b2517965adda.jpg?16480572688008041262"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
</ul>
</div>
<script type="text/javascript">
$(window).resize(function(){
//alert("resizing");
var windowWidth = $(window).width();
if(windowWidth < 600)
{
$("div.imagecontainer ul li").css({"width":"100%","height":"400px"});
}
else
{
$("div.imagecontainer ul li").css({"width":"20%","height":"200px"});
}
});
</script>
</body>
</html>
but I used small jquery. you can change the conditions and I used all css ans js internally.
other thing is width and heidht and other things are depend on your need change those(number of images you decide to put in a line), as your need.
I think this may not 100% fit to your need.I recommend to use bootstrap.
copy past and try this.hope this will help to you.
They are flowing underneath each other because each image is wrapped with a block element, in this case a <div>. Remove the div or set it's display value to inline-block.
The smaller images have each a display value of list-item which positions the items like a vertical list as well.
inline-block
.wrapper {
text-align: left;
}
.wrapper a {
display: inline-block;
}
<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>
display block and floats
/* Clearfix */
.wrapper::after {
content: ''
clear: both;
display: table;
}
.wrapper a {
display: block;
float: left;
}
img {
/* Fixes whitespace below each image */
display: block;
}
<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>
Flexbox
Use this if you don't need to support old versions of Internet Explorer (<11).
/* Clearfix */
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper a {
width: 50%;
}
img {
/* Stretch the image for demo purposes */
width: 100%;
/* Fixes whitespace below each image */
display: block;
}
<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>