I try to center pictures in the container. I've set left and right margin to 0 and still something is not working right.
#navbut {
width: 100%;
background: red;
margin: -7px 0 0 0;
color: white;
}
.container .box {
display: inline-block;
width: 10%;
margin-left: auto;
margin-right: auto;
}
.box img.Newspaper_pic {
width: 50%;
margin-left: auto;
margin-right: auto;
}
<section id="navbut">
<div class="container">
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
</div>
</div>
</section>
What I am doing wrong that I cannot center pictures in one line?
If your images are set to inline-block, you have to use
text-align:center;
. If your images are set to block,
margin: 0 auto;
will work.
Looks like your pictures are centered, but only within the .box divs, you have to center those .box divs in the .container aswell. The .container also needs to be width 100% so it spans over the whole #navbut.
Try to use flex. flex is very easy to make for these kind of layouts because of these alignment properties.
Reference Link flex
Stack Snippet
body {
margin: 0;
}
.container, .box {
display: flex;
justify-content: center;
}
.Newspaper_pic {
display: block;
max-width: 100%;
}
<section id="navbut">
<div class="container">
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
<div class="box">
<img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
</div>
</div>
</section>
Put whatever you want inside the center tags, e.g:
<center>
<img src="" alt="">
</center>
Related
I set out to create a float based grid system and have added gutters between columns via padding: 0 0.75em; applied to columns with margin-right: -0.75em; and margin-left: -0.75; applied to rows.
When I have a full width container it renders outside the width of the viewport with the horizontal scrollbarr showing.
I want the leftmost and the rightmost element to stick along the edges of the viewport, but still want to preserve the gutters between elements. I must be missing something. Any help would be appreciated, thank you!
Here's CSS followed by HTML:
.container-full {
width: 100%;
}
.row {
margin-right: -0.75em;
margin-left: -0.75em;
}
.row::before,
.row::after {
display: block;
content: "";
clear: both;
}
[class*="column-"] {
float: left;
padding-right: 0.75em;
padding-left: 0.75em;
}
<div class="container-full">
<div class="row">
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img01.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img02.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img03.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img04.jpg" alt="Image">
</div>
</div>
</div>
</div>
You can achieve this via using CSS Grid and the grid-gap property.
<div class="container">
<img src="https://picsum.photos/1920/1080" alt="">
<img src="https://picsum.photos/1920/1081" alt="">
<img src="https://picsum.photos/1920/1082" alt="">
<img src="https://picsum.photos/1920/1083" alt="">
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 0.75rem;
}
img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
I'm trying to simulate a shelf of books so that they look like this:
photoshop_mock_up
I can get the books to align just fine, but can't figure out how to make them retain their odd heights/widths, and not all just resize to the container:
HTML:
<div class="images-outer">
<div class="image-inner">
<img src="img/_0002_aristotle__poetics_and_rhetoric.png">
</div>
<div class="image-inner">
<img src="img/_0005_david_mamet__make_believe_town.png">
</div>
<div class="image-inner">
<img src="img/_0003_david_mamet__bambi_vs_godzilla.png">
</div>
<div class="image-inner">
<img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png ">
</div>
</div>
CSS:
.images-outer {
height: 50%;
max-height: 50%;
display: flex;
vertical-align: bottom;
}
.image-inner img {
max-height: 100%;
}
img {
max-height: 100%;
}
This makes them look like this: web_page
Ideas?
In display: flex, you should use align-items to set vertical align and justify-content for horizontal align.
.images-outer {
height: 300px;
max-height: 50%;
display: flex;
align-items:flex-end;
justify-content:center;
background: black
}
.image-inner {
max-width:30px;
padding: 0px 5px;
}
.image-inner {
object-fit: contain;
object-position: bottom;
width: 100%;
}
<div class="images-outer">
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/240" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/180" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
</div>
</div>
.image-inner img{
width:100%;
height:auto;}
This should help in sizing the images properly
Else, you could dive each image an individual class and give each it's individual height.
I am trying to put a text under every image of an album. so I've added 6 photos side by side with float left. I know that the img tag is an inline-block of default so I put a div with class text with text inside and in the CSS I assigned it "display: block" in this way I thought I would make it appear under the image .. why this does not happen? I tried also to assign to the div text... position absolute and to the container position relative but this only works for the first image ...
.conteiner {
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
.box {
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: calc(100% / 6 - 20px);
height: 15vh;
float: left;
margin: 10px;
background-position: center;
}
.clearfix {
content: '';
display: table;
clear: both;
.text {
display: block;
}
<div class="conteiner clearfix">
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
enter image description here that's what I have
enter image description here and that's what I want to do
It would be much simpler to use Grid or Flexbox to get such a layout. No need for float and clear.
Using Grid:
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
Then simply place the 6 images first to fill up the first row and the 6 texts second to fill up a second row.
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
</div>
Also, the content of the grid will be sized to fill the grid area so you may not have to explicitly size the box.
.box{
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: 100%;
height: 15vh;
background-position: center;
}
Try this :
https://codepen.io/the-wrong-guy/pen/xxZzBwR
.box {
display: grid;
}
I am really struggling with getting a text in the middle of every picture.
My gallery has 50 pictures and each of them has a different size. This is my code but it doesn't work :/ could anyone help, please? All "sample" text should be in the middle of the.
html:
<div class="row">
<div class="column">
<img src="/artbook/1.jpg">
<p> sample </p>
<img src="/artbook/2.jpg">
<p> sample</p>
<img src="/artbook/3.jpg">
<p> sample</p>
<img src="/artbook/4.jpg">
<P> sample </p>
<img src="/artbook/5.jpg">
<P> sample </p>
</div>
</div>
css:
.column img {
margin-top: 10px;
vertical-align: middle;
display: block;
align-content: center;
max-width: 250px;
.column p{
position: absolute;
text-align: center;
z-index: 1;
Something like this should work using an outer div container. It also uses the translate function to properly center the text both vertically and horizontally according to the parent container. One thing to keep in mind is that when you want to position something according to the parent container then the parent container must also be relative or absolute.
Also, by default, a paragraph element has extra padding around it. You may prefer to use a div instead.
.column div.outer {
position: relative;
display: inline-block;
}
.column img {
margin-top: 10px;
vertical-align: middle;
align-content: center;
max-width: 250px;
}
.outer div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<div class="row">
<div class="column">
<div class="outer">
<img src="1.jpg">
<div> sample1 </div>
</div>
<div class="outer">
<img src="2.jpg">
<div> sample2</div>
</div>
<div class="outer">
<img src="3.jpg">
<div> sample3</div>
</div>
<div class="outer">
<img src="4.jpg">
<div> sample4 </div>
</div>
<div class="outer">
<img src="5.jpg">
<div> sample5 </div>
</div>
</div>
</div>
Check it out.
First create a holder for your image and text. Give it position:relative.
Now, absolutely position your p element containing text relative to its holder. But extend your p to all sides with top:0; bottom:0; left:0; right:0;. Now p is occupying the whole holder. Just apply display:flex; to it and center the content with justify-content:center; align-items:center.
.holder{
position:relative;
display:inline-block;
}
.holder:hover img{
filter: brightness(100%);
}
.column img {
filter: brightness(45%);
margin-top: 10px;
vertical-align: middle;
display: block;
align-content: center;
max-width: 250px;
}
.column p{
position: absolute;
display:flex;
justify-content:center;
align-items:center;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
}
<div class="row">
<div class="column">
<div class='holder'>
<img src="http://via.placeholder.com/350x100">
<p> sample </p>
</div>
<div class='holder'>
<img src="http://via.placeholder.com/350x150">
<p> sample </p>
</div>
</div>
</div>
I have the following HTML structure currently:
<div id="image" style="margin: 20px;">
<h5>
<span>DriverName1</span>
<span>DriverName2</span>
</h5>
<img src=/>
<img src= />
</div>
I am trying to make the images appear side by side which they are doing, but the headers for drivername1 and drivername2 are appearing right next to each other over the same image. How do I make these spans match up with the top left edge of each image? I tried adding separate headers over each image but that makes the images go vertically one on top of the other then.
you can consider using display:flex for this
check the following snippet
div{
display:flex;
}
.image {
display: flex;
flex-direction: column;
border:1px solid;
margin-left:10px;
}
img {
width: 100px;
height: 100px;
}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Non-flex solution
div * {
display: inline-block;
}
.image {
border: 1px solid;
margin-left: 10px;
}
img {
width: 100px;
height: 100px;
display: table-cell;
}
header {}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Hope this helps