This question already has answers here:
Is it possible to center an inline-block element and if so, how?
(5 answers)
How can I horizontally center an element?
(133 answers)
Closed 3 years ago.
Currently, my webpage just consists of four images; two side-by-side. At the moment, they're all four off to the left side of the page and I would like to center them to the middle. I am currently using margin-top for its distance from the top of the page, so I am also using margin-left, right, etc. My elements stay in place when resizing my browser(which is what I wanted), but I can't move them to the center no matter how many times I change the left and right pixels.
body {
padding: 0px;
margin: 0px;
}
#dLand {
display: inline-block;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#sunset {
display: inline-block;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#griff {
display: inline-block;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#samo {
display: inline-block;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
<div id='container'>
<img id='dLand' src='img/calidisney.jpeg' alt='Disneyland, CA' style='width: 40%'>
<img id='sunset' src='img/sunset.jpg' alt='Sunset Strip' style='width: 40%'>
<img id='griff' src='img/griffith.jpg' alt='Griffith Observatory' style='width: 40%'>
<img id='samo' src='img/samopier.jpg' alt='Santa Monica Pier' style='width: 40%'>
</div>
Try this one but if you want to display all images inline in mobile view use #media queries to archive that.
div#container {
margin-top: 200px;
width:100%;
text-align:center;
}
div.pic{
display:inline-block;
}
<div id="container">
<div class="pic"><img id='dLand' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
<div class="pic"><img id='sunset' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
<div class="pic"><img id='griff' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
<div class="pic"><img id='samo' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
</div>
see this in full-page.
There are different ways to center things, one technique is to set #container top and left to 50%, then transform: translate(-50%,-50%)
You may use flex to center and wrap them:
html {
min-height: 100%;
display: flex;
}
body {
/* or any wrapper within a flex or not parent*/
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 50%;
}
<img src="http://dummyimage.com/200x100/a0f">
<img src="http://dummyimage.com/200x100/bad">
<img src="http://dummyimage.com/200x100/def">
<img src="http://dummyimage.com/200x100/f00">
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I'm trying to create four gray squares that display in the middle of the browser.
Each square is set to be 40 pixels wide and have borders of 10 pixels.
I use the box_container class in a <div> to allow some CSS to center the four boxes.
If I set the width of the box_container class to 240px, only 3 boxes fit into the first row.
I need to set the width to 250px minimum to get all the four boxes to display in one row. Why is this when the eight borders of 10px and four img boxes of 40px adds up to 240px (10px*8 + 40px*40 = 240px)?
<style type="text/css">
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
}
.box_container {
width: 250px;
margin: 0 auto;
}
</style>
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>
Your calculation does not exactly work out that way. There is whitespace between each <img> tag, and this possibly causes it to overflow out of the container.
You may remove this whitespace by making them float: left in your css.
The resulting code displays the four boxes in the same line:
<style type="text/css">
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
float: left
}
.box_container {
width: 250px;
margin: 0 auto;
}
</style>
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>
Use float:left in .boxes class
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
float: left;
}
.box_container {
width: 250px;
margin: 0 auto;
}
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>
It is because there are spaces between your image tags. There isn't a nice solution, but here are a few ways you can solve it:
Using no spaces:
<div class="box_container"><img class="boxes"><img class="boxes"><img class="boxes"><img class="boxes"></div>
Or using empty comments:
<div class="box_container"><!--
--><img class="boxes"><--
--><img class="boxes"><--
--><img class="boxes"><--
--><img class="boxes"><--
--></div>
Another option that might work in your case is to set the images to float:
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
float: left
}
*Also, if you are not using xhtml, you should not have a closing </img> tag. I have removed them in the above examples as your tag says you are using html. Technically, I'm not 100% sure why you are using images in the first place since you just want grey boxes. I would recommend using divs displayed as an inline block like this:
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
display: inline-block;
float: left
}
.box_container {
width: 250px;
margin: 0 auto;
}
<div class="box_container">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
I am trying to learn how to make a responsive grid layout with images. I feel i am almost there but i am having a few issues with alignment. First of all to make things easier to understand I have made a mock-up of what i am trying to achieve:
(grid will be used to display images/posts. i want to be able to mix and match them.)
Screen-shot of what i have achieved so far:
but when i add a med-box to the grid i have alignment issues. as you can see here:
(the height of the MED-BOX is slightly taller than the SML-box and the SML-BOX does not align properly.)
I also have this problem when i add another 3 x SML-BOX under a column with a MED-BOX in it:
I thought it was something to do with the % width of my "med-box" (see code below) but i have tried adjusting the width percentage and cant get it to work! Another issue I am having is when i go into mobile width, the margin on the left is off and i am not sure why. Please check out my code below or on JsFiddle: https://jsfiddle.net/shiggydoodah/z0og70wn/
I have been stuck on this for awhile now and i really need to some expert advice. If anyone knows how to fix this it would be greatly appreciated if could share it with me.
Many Thanks
Louis
section {
width: 80%;
margin: 20px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
border: 4px solid red;
overflow: hidden;
}
.row {
margin: 0 auto;
width: 100%;
}
.col {
min-height: 40px;
margin-left: 1%;
margin-right: 1%;
margin: top 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
}
.col:first-child {
margin-left: 0px !important;
}
.col:last-child {
margin-right: 0px !important;
}
.img-responsive {
max-width: 100%;
height: auto;
display: block;
padding: 0;
}
.col.lrg {
width: 100%;
}
.col.sml {
width: 32%;
}
.col.med {
width: 65%;
padding: 0;
}
#media (max-width: 766px) {
col {
width: 90% !important;
margin: 10px auto !important;
padding: 0;
}
.col.lrg {
width: 100%;
height: auto;
}
.col.sml {
width: 100%;
height: auto;
}
.col.med {
width: 100%;
height: auto;
}
}
<section>
<div class="row">
<div class="col lrg">
<img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col med">
<img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
</section>
First of all there are a few issues with how you are using your grid. Whenever you float an element you essentially remove said element from the document flow. This means subsequent elements will not know how to position themselves in the natural flow of things. You need to ensure you use a clear in order to negate the effects of a float.
In additional the medium element needs to be set to 66% width to account for the margin on the left and right of your small column class. Please see edited fiddle
CSS:
.col.med {
width: 66%;
padding: 0;
}
I have also added a clear to your row class:
.row::after {
content: "";
display: table;
clear: both;
}
I have also removed the use of the !important statement you've implemented. This is a very bad practice to adopt as if you are using inheritance correctly and the natural cascading nature of CSS then you will not need to explicitly try to override anything using this method.
This issue is due to the proportions of your MED-BOX image.
You should crop it a little bit with some modifications on your .row css properties.
.row {
margin: 0 auto 15px;
width: 100%;
max-height: 455px;
overflow: hidden;
}
I equally add a bottom margin per row as the overflow hidden behavior cause the .col bottom margin property to be hidden by the row overflow.
You have to clear each row when you have floating elements inside of it and overflow: hidden so that it could fill the height.
.row
{
clear:both;
overflow: hidden;
}
This question already has answers here:
Images side by side without any space between them
(5 answers)
Closed 7 years ago.
I've written a very basic registration form for a football team, which is working as expected.
However, after adding two place-holder images at the bottom of the page, they are exhibiting a gap between each other in Chrome, Firefox and IE11. I'm wondering why this would be, as I've used this CSS Reset, and I haven't specified any margins or spacing for the images. Furthermore, using 'Inspect element' in Chrome does not show any graphical representation of the gap in any way.
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>
I've provided the minimal amount of code as this still demonstrates the same behaviour. Any information would be much appreciated.
Images are inline elements by default and therefore whitespace has an effect.
One option to remove this is to set the font-size of the parent to 0.
See this question on SO for others.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
font-size: 0;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>
This is the newline between the img tags being visible (any amount of whitespace is treated as a single space). You could put the tags on the same line, or add font-size:0px; to your #sponsors rule.
You can use HTML comments to remove the inline whitespace caused by putting the <img> tags on two separate lines.
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="..." /><!--
--><img alt="Sponsor 2 Place holder" src="..." />
</div>
</div>
... which would be the same as writing it as
<div class="wrapper">
<div id="sponsors">
<img alt="..." src="..." /><img alt="..." src="..." />
</div>
</div>
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Closed 7 years ago.
I have a margin between the images and the Share us and I don't really know where it comes from.
img: https://liko.tinytake.com/sf/MTU4MjUyXzk4ODk1MA
My HTML5 code:
<div id="socailMedia">
<p>Follow us:</p>
<div id="followImg">
<img src="socailMedia/facebook.png" alt="followFacebook">
<img src="socailMedia/twitter.png" alt="followTwitter">
<img src="socailMedia/instagram.png" alt="followInstagram">
<img src="socailMedia/pinterest.png" alt="followPinterest">
<img src="socailMedia/google.png" alt="followGoogle">
</div>
<p>Share us:</p>
</div>
My CSS code:
#socailMedia{
color:#939393;
width: 350;
float:left;
margin-left: 20;
}
#socailMedia p {
margin: 0;
background-color: red;
}
#followImg img{
background-color: red;
height: 35;
padding:0;
margin: 0;
}
You need to add vertical-align: bottom to the #followImg img elements:
#socailMedia {
color: #939393;
width: 350;
float: left;
margin-left: 20;
}
#socailMedia p {
margin: 0;
background-color: red;
}
#followImg img {
background-color: red;
height: 35;
padding: 0;
margin: 0;
vertical-align: bottom;
}
<div id="socailMedia">
<p>Follow us:</p>
<div id="followImg">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followFacebook">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followTwitter">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followInstagram">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followPinterest">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followGoogle">
</div>
<p>Share us:</p>
</div>
By default images are aligned with the baseline which rests few pixels above the bottom of the parent. Setting vertical alignment to bottom will cause the images to align with the bottom of the paragraph.
Perhaps from the enclosing "followImg" div. You've cancelled the margin attribute for the nested img tags, but haven't addressed their encompassing div. There may also be padding involved, depending on how the CSS is inherited. You can use the Web inspector in Chrome, Safari, or Firefox to take a look at the active attributes for these elements, and better troubleshoot the situation.
The following might be all that's needed:
#followImg {
padding: 0;
margin: 0;
}
There is a padding that comes with paragraph tags. Try this instead:
<div id="socailMedia">
<p>Follow us:</p>
<div id="followImg">
<img src="socailMedia/facebook.png" alt="followFacebook">
<img src="socailMedia/twitter.png" alt="followTwitter">
<img src="socailMedia/instagram.png" alt="followInstagram">
<img src="socailMedia/pinterest.png" alt="followPinterest">
<img src="socailMedia/google.png" alt="followGoogle">
</div>
<p style="margin:0;">Share us:</p> <!-- CHANGE THIS -->
</div>