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">
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 5 years ago.
I already tried fixing it with margin, table styles, and the bootstrap css but it isnt working
I need the A tags to center in the label-row-overview div and be responsive
HTML
<div class="label-row-overview">
<div class="label-img-overview"><span>EXTRA FOTO'S</span></div>
<div class="label-img-overview leftxspace"><span>MAATTABELLEN</span></div>
<div class="label-img-overview leftxspace"><span>PRODUCT SPECS</span></div>
<div class="label-img-overview leftxspace"><span>CERTIFICATEN</span></div>
</div>
Style.css
.label-row-overview a {
color: #FFF;
background-color: #12a19b;
padding: 10px;
display: inline-block;
margin: 5px;
overflow: hidden;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
You can apply this CSS to the inner :
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width to 50%. Any width less than the containing will work. The margin: 0 auto is what does the actual centering.
If you are targeting IE8+, it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.
If you don't want to set a fixed width on the inner div you could do something like this:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Applying display: block and text-align: center to the div does the trick:
.label-row-overview a {
color: #FFF;
background-color: #12a19b;
padding: 10px;
display: inline-block;
margin: 5px;
overflow: hidden;
}
.label-row-overview {
display: block;
text-align: center;
}
<div class="label-row-overview">
<a href="{URL}" target="_blank">
<div class="label-img-overview"><span>EXTRA FOTO'S</span></div>
</a>
<a href="{URL}" target="_blank">
<div class="label-img-overview leftxspace"><span>MAATTABELLEN</span></div>
</a>
<a href="{URL}" target="_blank">
<div class="label-img-overview leftxspace"><span>PRODUCT SPECS</span></div>
</a>
<a href="{URL}" target="_blank">
<div class="label-img-overview leftxspace"><span>CERTIFICATEN</span></div>
</a>
</div>
Your a tags are naturally aligned with text since they are not block elements, so using text-align: center on their parent container solves the problem in this scenario.
.label-row-overview{
text-align: center;
}
.label-row-overview a {
color: #FFF;
background-color: #12a19b;
padding: 10px;
display: inline-block;
margin: 5px;
overflow: hidden;
}
<div class="label-row-overview">
<div class="label-img-overview"><span>EXTRA FOTO'S</span></div>
<div class="label-img-overview leftxspace"><span>MAATTABELLEN</span></div>
<div class="label-img-overview leftxspace"><span>PRODUCT SPECS</span></div>
<div class="label-img-overview leftxspace"><span>CERTIFICATEN</span></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;
}
All right so I have a bit of an odd request to try and fulfill. I have a page that has a listing of divs, inside of which are an image and a link. Each row has 3 divs max. Sometimes, though, the last row may have just 1 or 2 divs. What I need to try and do is set things up so that if the last row only has 1 or 2 divs, then those divs need to be centered horizontally within their row.
Is this something that is possible? Would I need to use JavaScript/jQuery to count the number of divs in the final row? Or could I do this all with just CSS?
Here is how the divs are setup right now:
<div class="About-Categories clearfix">
<div class="About-Category clearfix">
<img src="[image url]" class="image">
[link text]
</div>
<!--Additional About-Category divs go here as needed-->
</div>
There could be any number of About-Category divs, but the css is setup to ensure that there are only 3 About-Category divs within the width of the page (until a screen size of 460px is reached).
CSS as it is now:
.About-Categories{
text-align: center;
}
.About-Category{
float: left;
height: auto;
margin-left: 0%;
margin-top: 0px;
display:inline-block;
padding: 30px;
width: 33%;
&:nth-of-type(1){
clear: both;
}
}
#wrap {
width: 600px;
text-align: center;
}
.tile {
width: 198px;
height: 100px;
border: 1px solid #000;
display: inline-block;
margin: 0;
padding: 0;
}
<div id="wrap">
<div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
</div>
If you display the divs as inline-block, they'll respect the text-align attribute. In combination with a wrapper sized to fit three divs, you should get the result you're looking for.
Example:
#wrap {
width: 600px;
text-align: center;
}
.tile {
width: 198px;
height: 100px;
border: 1px solid #000;
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
}
<div id="wrap">
<div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
</div>
I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}
I've been trying to get this image centered in the page for a while, and for some reason margin-left: auto; margin-right: auto; weren't doing anything. So in the spirit of wildly trying everything in sight, I stumbled on the following surprisingly correct result. My question is, why on earth does setting the width to 25% work? I would have expected 100%, or 50% at least.
This fiddle shows some other widths, which apparently behave in a nonlinear fashion: http://jsfiddle.net/mo85kkvv/
(Bonus question: is there a super-obvious way to use the margin-left/right properties instead that I'm missing?)
HTML:
<body>
<div id="bcontainer">
<img src="banner.png" alt="banner" />
</div>
</body>
CSS:
body {
margin: 0;
}
#bcontainer {
width: 25%; /* why 25%?? */
height: 50px;
display: table-cell;
text-align: center;
}
I don't know a lot about HTML but I think that the proper way to define the class container is:
.container {
height: auto;
display: block;
margin:auto;
}
This is more generic. You can use the element inspector, and see how the layers change.
Is what your after ? http://jsfiddle.net/mo85kkvv/4/
HTML
<body>
<div class="container" id="one">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="two">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="three">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="four">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div>
</body>
CSS
body {
}
.container img{
width:100%;
display: inline;
text-align: center;
margin: 0 auto;
}
#one {
width: 25%;
margin: 0 auto;
}
#two {
width: 50%;
margin: 0 auto;
}
#three {
width: 75%;
margin: 0 auto;
}
#four {
width: 100%;
margin: 0 auto;
}
It all depends what you want. Do you want the wrapper to be centered with the image floating in the center, or do you want the wrapper (in this case .container) to shrink around the image and be the one that floats in the center? I have updated your fiddle with simple examples of a few options.
http://jsfiddle.net/mo85kkvv/6/