This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 10 months ago.
I'm practising CSS so I'm working on a simple image gallery.
I would like to center the images horizontally on the div but I don't know how to do it. Thanks.
How it looks: https://imgur.com/a/cs5lQhE
(the pink background is just for reference)
html:
<main>
<div class="images">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg"/>
<img src="img/6.jpg"/>
<img src="img/7.jpg"/>
<img src="img/8.jpg"/>
</div>
</main>
css:
*{
padding:0;
margin:0;
}
body{
background-color:#000;
}
.h {
width: 200px;
color: #fff;
padding: 30px 0 30px 0;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.images {
width: 100%;
height: 800px;
background-color: #ff8787;
}
img {
width: 410px;
height: 250px;
vertical-align: top;
float: left;
margin: 0 10px 20px 10px;
padding: 5px;
border: 1px solid #fff;
opacity: 0.85;
}
img:hover{
opacity:1.0;
}
You could use display flex to horizontally center
div {
display: flex;
justify-content: center;
}
Related
This question already has answers here:
How to place text and image next to each other? [duplicate]
(2 answers)
Closed 2 years ago.
Im new to HTML and I'm trying to align my test and images so they are next to each other.
I want the text to be on the left and the image to be on the right.
#main {
border: 1px solid black;
margin: 20px 20px
}
h3.main {
margin: 5px 5px 10px 5px
}
p.main {
margin: 0px 5px 0px 5px
}
p.left {
vertical-align: middle;
}
img.main {
width: 50%;
height: 100%;
}
img.right {
vertical-align: middle;
}
<div id="main">
<h3 class="main">About Us!</h3>
<p class="main left">Short Bio</p>
<img src="img/code.jpg" class="main right">
</div>
Use flex and the alignment will be taken care by default and also I have removed unnecessary code to make it simple.
#main {
display: flex;
}
.text {
display: flex;
flex-direction: column;
}
.main,
.left {
width: 100px;
}
#main img {
height: 100px;
width: 100px;
}
<div id="main">
<div class="text">
<h3 class="main">About Us!</h3>
<p class="main left">Short Bio</p>
</div>
<img src="http://placekitten.com/301/301" class="main right">
</div>
This question already has answers here:
CSS center display inline block?
(9 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I can't seem to center a div horizontally inside another div. Here's my html:
.block {
padding: 0px 20px;
max-width: 820px;
margin: 0 auto;
background-color: #ff0;
}
.container {
margin: 0 auto;
display: inline-block;
background-color: red;
padding: 5px;
}
<div class="block">
<div class="container">
<button>£10</button>
<button>£20</button>
<button>£30</button>
</div>
</div>
It looks like this:
I want the red div centered inside the yellow div. At the moment it is aligned left.
Here's the codepen:
https://codepen.io/carlrippon/pen/MWwaORv?editors=1111
I don't need to support old versions of IE - just IE11
Your red DIV (.container) is an inline-block, that's why margin: 0 auto won't work.
Just add text-align: center; to its parent (.block)
.block {
padding: 0px 20px;
max-width: 820px;
margin: 0 auto;
background-color: #ff0;
text-align: center;
}
.container {
display: inline-block;
background-color: red;
padding: 5px;
}
<div class="block">
<div class="container">
<button>£10</button>
<button>£20</button>
<button>£30</button>
</div>
</div>
That worked for me:
.block {
text-align: center;
padding: 0px 20px;
max-width: 820px;
margin: 0 auto;
background-color: #ff0;
}
.container {
margin: 0 auto;
display: inline-block;
background-color: red;
padding: 5px;
}
<div class="block">
<div class="container">
<button>£10</button>
<button>£20</button>
<button>£30</button>
</div>
</div>
The image element can be centered levelly with margin:0px 50px 0px 50px;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0px 50px 0px 50px;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
In the situation, margin:0 auto; == margin:0px 50px 0px 50px;.
So it is equal to write margin:0px 50px 0px 50px; as margin:0 auto;.
Why it can't be centered with margin:0 auto;?
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You miss display:block
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
.img1 {
margin: 0 auto;
display: block
}
<div class="wrapper">
<img class="img1" src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
I'm sure there are better / more efficient ways of doing this. but...
This is what I use for centering images inside a div both vertically and horizontally while maintaining the div's fixed dimensions. The images are never cropped / stretched.
body {
text-align: center;
margin: 0 auto;
}
.my-image-parent {
margin:1em auto;
width: 350px;
max-width:100%;
height: 200px;
line-height: 200px; /* should match your div height */
text-align: center;
font-size: 0;
background: #131418;
}
/*fluff */
.bg1 {background: url(https://unsplash.it/799/799);}
.bg2 {background: url(https://unsplash.it/800/400);}
.bg3 {background: url(https://unsplash.it/400/800);}
/* end fluff */
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<h4>Works for square, landsacape and portrait images.</h4>
<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>
Since img tag is an inline-block element, margin: 0 auto; will not work. Its display property has to be set to display: block;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
display: block;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You can also add text-align: center; for the outer wrapper to center the image.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
Edit:
Inline and inline-block elements do not have a width property, and so the "auto" cannot be calculated.
Reference : Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
I have a very simple HTML/CSS webpage.
I have three images arranged horizontally on the page, like so:
I'd like to center them on the page, like so:
What's the fix?
Here's the (not-working) code I'm currently using:
.sketches {
align-content: center;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="sketches">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
Since <div> by default is a block element and <img> is an inline-block element, if you wanna center images horizontally, it's enough to set text-align: center; to div container:
.sketches {
text-align: center;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="sketches">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
Here's the solution:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.sketches {
align-content: center;
margin-left: auto;
margin-right: auto;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="outer">
<div class="middle">
<div class="sketches" align=center>
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</div>
</div>
Used technique to center vertically from here.
CSS
a) .sketches selector
1) Insert display: flex; declaration
2) Instead of the CSS property: align-content add justify-content
.sketches {
display : flex;
justify-content : center;
/* can be removed */
min-width : 350px;
}
img {
border-radius: 50%;
border: 1px solid #000000;
}
<div class="sketches">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I have two divs that contain two pictures, but there is always this weird tiny blank space in between them. I tried setting the margins and paddings to 0 for both of the divs in css but it still doesn't work.
Here is my code:
#selector{
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
#break-1{
display: block;
margin: auto;
padding: 0;
width: 100%
height: 20px;
}
#break-1 img{
width: 100%;
}
<div>
<img src="http://placehold.it/350x150" alt="" id='selector'>
</div>
<div id="break-1">
<img src="http://placehold.it/350x150" alt="">
</div>
img is inline element and by default is vertical-align:baseline,
you could fix that two ways:
- add display:block
#selector {
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
#break-1 {
display: block;
margin: auto;
padding: 0;
width: 100%;
height: 20px;
}
img {
width: 100%;
display: block
}
<div>
<img src="//placehold.it/100" alt="" id='selector'>
</div>
<div id="break-1">
<img src="//placehold.it/100" alt="">
</div>
- add vertical-align:bottom
#selector {
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
#break-1 {
display: block;
margin: auto;
padding: 0;
width: 100%;
height: 20px;
}
img {
width: 100%;
vertical-align: bottom
}
<div>
<img src="//placehold.it/100" alt="" id='selector'>
</div>
<div id="break-1">
<img src="//placehold.it/100" alt="">
</div>