I have a gallery page. I have tiles that are a preset width. Some images fit it exactly, others are too wide and are set to width 100%. I want to center the image in the tile so it will have black bars on the top and bottom
HTML:
<figure class="gallery-tile">
<img src="images/gallery/lulBBQ.JPG" class="gallery-tile-image">
<figcaption class="gallery-tile-description">
Sample Text.
</figcaption>
</figure>
CSS:
.gallery-tile{
display: block;
position: relative;
overflow: hidden;
float:left;
width: var(--halfwebpageWidth);
height: 640px;
background-color: black;
margin: auto;
}
.gallery-tile-image{
display: block;
overflow: hidden;
width: var(--halfwebpageWidth);
margin: auto;
vertical-align: middle;
}
Use display:flex to align your content vertically centered
.gallery-tile {
position: relative;
overflow: hidden;
float: left;
width: var(--halfwebpageWidth);
height: 640px;
background-color: black;
margin: auto;
display: flex;
align-items: center;
}
.gallery-tile-image {
display: block;
overflow: hidden;
width: var(--halfwebpageWidth);
margin: auto;
vertical-align: middle;
}
<figure class="gallery-tile">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqrfVof7CYYRtsdCu1VD4AWoPB2gs25PP5hQAuhOwhZngrOhsS" class="gallery-tile-image">
<figcaption class="gallery-tile-description">
Sample Text.
</figcaption>
</figure>
Set height,with and line-height properties according to your needs.
figure {
width: 400px;
height: 300px;
line-height:300px;
text-align: center;
border:1px solid red;
}
figure img {
vertical-align: middle;
max-height:250px;
}
figcaption{
line-height:20px;
height:20px;
margin-top:10px;
}
<figure>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
Related
How to give textarea the same height as its sibling inline-block images?
.wrap {
text-align: center;
}
.rowimg {
display: inline-block;
width: 29%;
margin: 0 2%;
}
.rowtx {
display: inline-block;
width: 29%;
margin: 0 2%;
height: 100%; // here
overflow-y: scroll;
}
<div class='wrap'>
<img class='rowimg' src='ph.jpg' alt='img'>
<img class='rowimg' src='ph.jpg' alt='img'>
<textarea class='rowtx'></textarea>
</div>
I use a masonry-look for my cards like that here https://codepen.io/daiaiai/pen/VPXGZx
There I want to add some infos via figcaptions on top of the image/figure. I tried to do that with position:relative but that doesn't work. I wanna avoid using a negative margin-top but I can't think of a different solution. What/How should one do that?
Same as on codepen, but the raw "code" for css:
body {
margin: 0; background: #131212;
}
div#masonry {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
max-height: 800px;
font-size: 0;
}
div#masonry figure {
width: 33.3%;
transition: .8s opacity;
}
figcaption{
position:relative;
top:100px;
left:50px;
}
figure img{
max-width:100%;
}
and that html-code
<div id="masonry">
<figure><figcaption>This girl</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></figure>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></figure>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
</figure>
</div>
Thanks for your help!
The reason you are not seeing the figcaption is because you have set the font-size of #masonry to 0, perhaps to remove spaces between columns.
You need to assign a font-size to figcaption to correct this.
I would also recommend changing how you position it.
Add position: relative to figure, and position: absolute to figcaption.
CODEPEN
SNIPPET:
body {
margin: 0;
background: #131212;
}
div#masonry {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
max-height: 800px;
font-size: 0;
}
div#masonry figure {
width: 33.3%;
transition: .8s opacity;
position: relative;
}
figcaption {
position: absolute;
top: 0;
left: 0;
font-size: 22px;
width: auto;
background: black;
color: white;
}
figure img {
max-width: 100%;
}
/* fallback for earlier versions of Firefox */
#supports not (flex-wrap: wrap) {
div#masonry {
display: block;
}
div#masonry img {
display: inline-block;
vertical-align: top;
}
}
<div id="masonry">
<figure>
<figcaption>This girl</figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">
</figure>
<figure>
</div>
html
<div style="display: block; height: 200px; width: 200px; background-color: red; position: relative">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute;"/>
</div>
This fits my image according to my div. What I want is no matter how big or small is image it should be displayed according to div.
If the image is vertical there should be blank space on top and bottom and if it is horizontal then left and right blank space. Image should not be stretched and the height and width of the div should be fixed.
I am able to do this but vertical image is aligned top and horizontal is aligned left. How can I make it on center ?
add left:50% & top:50% & transform: translate(-50%, -50%);
<div style="display: block; height: 200px; width: 200px; background-color: red; position: relative">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); "/>
</div>
Putting all together, and naming “wraptocenter” the class of the container, that’s the relevant CSS. Code for IE/Mac is wrapped in a suitable filter. Code for IE7-/Win is put in conditional comments.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
And that’s the relevant HTML
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
<div class="maindiv">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" alt="tall image" />
</div>
img
{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto auto;
}
.maindiv
{ border: 1px solid #888;
display:table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
}
This should workmargin: 0 auto;
display: block;
max-width: 100%;
Here follow the code:
<div style="display:inline-block; height:200px; width:200px; background-color:red; position:relative; vertical-align:middle; text-align:center">
Great coding for you!
You can use below styles to the div for horizontal and vertical alignment.
display: table-cell;
vertical-align: middle;
text-align: center;
And avoid position for both div and img
Below style added for img for vertical centering.
display: inline-block;
vertical-align: middle;
Also I have separated HTML and style as in below sample.
div{
height: 200px;
width: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
max-height: 100%;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
<div>
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" />
</div>
You should remove some of the stylings from div and all stylings from the img and assign the image a fixed width using width attribute as below:
HTML:
<div>
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" width="150" />
</div>
CSS:
div {
height: 200px;
width: 200px;
background-color: red;
}
div img {
display: table;
margin: 0 auto;
}
Refer demo.
flex box is a good solution for this situation. Your code have to be modified a little bit like this:
#container {
/*flex box goes here*/
display: flex;
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
/* your old code goes here*/
height: 200px;
width: 200px;
background-color: red;
position: relative
}
#img {
/* you can change height and width to test the result */
max-height:50%;
max-width: 50%;
}
<div id="container">
<img id="img" src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg"/>
</div>
I'm new to CSS, and I've looked for help in the previous forums on this issue. I think I'm doing everything right but my floated elements are being yanked to the left.
Here is my code:
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}
.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}
.third img {
float: left;
position: relative;
}
And my html:
<div class="grid">
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
</div>
Help please!
I can't comment yet…
Your original code on fiddle
The problem come from padding in .home class.
I have disabled padding:25px; here in .home class, because padding is added to width in CSS:
The modified version (without padding) on fiddle
Now it's not "pulled too far on the left".
What you can do instead, is to add margin:25px; to .third class, like this:
The modified version (with margin) on fiddle
EDIT: A CLEAN REVISITED VERSION:
The HTML code:
<div class="grid">
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/nemo/350/200/1" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/futurama/350/200/6" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/up/350/200/6" />
</div>
</article>
</div>
The CSS code:
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
}
.third {
display:table-cell;
height: 150px;
width: 150px;
padding: 25px;
border-radius:25px;
vertical-align:middle;
background-color:#eee; //added just for test display
}
.third img {
border:none;
width: 100%;
height: auto;
}
The result here on fiddle.
Images are adaptative, centered vertically and horizontally.
The .third class have a light grey background color just for testing and displaying the curved borders and the centered images inside it.
I have also replaced in html code, the second <article> tag by a <div> tag, because it is redundant.
Please use the updated code I think it will work.
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.third {
display:block;
border-radius: 25px;
}
.third img {
width:100%;
height:auto;
}
Here's a possible correction of your code to you :
See this fiddle
I've changed a little the HTML structure like this :
<section class="home">
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
</section>
It's better for semantic to have section around article and not article around article.
I've simplify the CSS code like this :
section.home {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
article.third {
text-align: center;
float: left;
width: 150px;
position: relative;
padding: 25px;
overflow: hidden;
}
.third img {
border-radius: 25px;
width: 100%;
position: relative;
}
If you use fluid width for container, then use fluid width for padding/margin of article.
In that case, i use fixed width of the container and for padding values.
I have this problem. I need that the yellow div adapts to the contained image; its width is dynamic, so I can't use a fixed width.
I can't find a solution anywhere, and I've tried with margin: 0; display:block; but nothing.
Here is the code:
HTML
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test" ><p>Prueba</p></label>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>
CSS
.s_container{
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion{
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background:yellow;
}
.img_opcion{
display:;
width: auto;
max-width: 100%;
}
.ssm_opcion img{
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion{
width: 100%;
height:100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background:green;
}
.ti-ab-d{
vertical-align: bottom;
text-align: right;
}
.s_container {
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion {
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background: yellow;
}
.img_opcion {
display: ;
width: auto;
max-width: 100%;
}
.ssm_opcion img {
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion {
width: 100%;
height: 100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background: green;
}
.ti-ab-d {
vertical-align: bottom;
text-align: right;
}
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test">
<p>Prueba</p>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>
You have some conflicting CSS in the snippets you provide, I've modified the code to remove the .img_opcion CSS you had in there. Image autosizes to the container nicely.
https://jsfiddle.net/Lvv7Lxrs/1/
EDIT: the width declaration is just to prove the container snaps to size, as the default "broken image" browser stand-in is a bit small.
If you add a div and in the div you put a paragraph inside the div, if you give to div such rules css a background-color: #color, the div fits automatically to the paragraph, you don't must you do not have mandatory put a width-height fixed.