Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property
Related
I would like to create a css class so a div can be placed in the center of its parent. The code I am using is:
.centered {
position: absolute;
margin: auto;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
It works if the parent is larger than the child element, or has the same size:
https://jsfiddle.net/cy8dn1km/
But if the child is larger, then its center is not positioned at the center of its parent. Instead their left borders will be at the same place, and the child element will be extended only to right:
https://jsfiddle.net/797L7nce/
Something is wrong with the horizontal centering.
How is it possible to fix it using CSS only (without using CSS 2D/3D transformations), without adding new container elements?
Add left: 50%; transform: translate(-50%, 0);and remove right: 0px;
.centered {
position: absolute;
margin: auto;
display: block;
bottom: 0px;
top: 0px;
left: 50%;
transform: translate(-50%, 0);
}
Demo
Here is a solution without using CSS 2D/3D transformations. You can use display: flex with flex-direction: column (this is important) on parent element and display: table on child element.
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.centered.d1 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
display: table;
}
<div class="centered d1">
<div class="centered d2"></div>
</div>
If you know the dimentions of the elements you can use the left/top position at 50% with negative margins of half the element size.
I have updated your fiddle here: https://jsfiddle.net/797L7nce/2/
.centered {
position: absolute;
display: block;
left:50%;
top:50%;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
margin-left:-25px;
margin-top:-25px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
margin-left:-125px;
margin-top:-125px;
}
Ok i tried without 2D CSS :
Change absoluteto fixed and add some margin: auto;
JSfiddle here
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
background: green;
}
.centered {
position: fixed;
margin: auto;
display: block;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
}
<div class="centered d1">
<div class="centered d2">
</div>
</div>
You're almost there. Just set the absolute positions to the same (large) negative number, to make enough room for the auto margin:
.centered {
position: absolute;
margin: auto;
bottom: -9999px;
left: -9999px;
top: -9999px;
right: -9999px;
}
https://jsfiddle.net/797L7nce/9/
Adding the below CSS to .d2 will solve the issue.
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
position:absolute;
left:50%;
margin-left:-125px;
}
You can check the demo here
In Bootstrap 4:
to center the child horizontally, use bootstrap-4 class:
justify-content-center
to center the child vertically, use bootstrap-4 class:
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work
I know it's not the direct answer to this question but it may help someone
I am having a really hard time with getting this image centered.
I have tried the following:
margin: 0 auto;
display: block;
text-align: center;
I really do not want to use the left command because it isn't working in my mobile setting. I just want a fixed property that will work everywhere and I won't have to add it again.
Why is this image not centering?
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
</div>
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
I had also tried the below but it still doesn't work.
.approach-tablet {
bottom: 0;
position: absolute;
/*left: 50%;*/
}
img.approach-tablet {
display: block;
margin: 0 auto;
text-align: center;
}
I need the position: absolute to position the div where I am wanting it to go. It sits on the bottom of the page. Regardless, the image isn't centering with what is in there.
As indicated in this SO answer, an element that is positioned absolutely cannot be centered using the margin: 0 auto method and you would have to resort to other options.
One option would be to use left: 50% and then use transform: translateX(-50%) to get it back to the center. The left: 50% offsets the image 50% from the left edge of the page (but this alone will not center the image because the image's left edge is at page center). The translateX(-50%) moves the image to the left by half of the image's width and thus would result in the image's center being at page center.
This should work in all modern browsers (including mobile) as the browser support is good.
As can be seen from the snippet (view it in normal mode and full page mode), no special tweaking is needed for it to be responsive.
Note: Though you had stated that you don't want to use left property in the question, I understand based on your comment that the reason was that mobile support is needed and be responsive.
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: absolute;
left: 50%;
height: 200px;
transform: translateX(-50%);
}
<div id="section3-container">
</div>
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
Please use below code
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
CSS
#section3-container {
margin: 0 auto;
text-align: center;
width: 100%;
}
.approach-tablet {
height: 200px;
margin: 0 auto;
text-align: center;
width: auto;
}
Your image is outside of the div. If you put it inside, it centers
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
Just add another div, html is all about divs:
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
#section4-container {
text-align: center;
width: 100%;
}
<div id="section3-container">
</div>
<div id="section4-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
I have div of fixed size height:45px and width:60px and no other css to div. This div used to show the image uploaded by customer. I want to give the dimensions of image so that the uploaded image will be fit in given div perfectly. I need to give the optimized size so that image will look good in div. First logic I tried to give the image with 45 by 60, 90 by 120 like.
What is the correct way to solve this.Please guide.Thanks in advance.
div {
width: 160px;
height: 145px;
overflow: hidden;
border: 1px solid black;
}
div img {
width: 100%;
min-height: 100%;
}
<div>
<img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"/>
</div>
Best thing is the following:
#div-to-contain-image img {
display: block;
height: auto;
min-width: 100%;
width: 100%;
}
This will render the image the best as possible. If you need to cover the containing div entirely, you could do the following:
#div-to-contain-image img {
display: block;
height: 100%;
width: 100%;
}
I have multiple solution for you image thumbnail setting. Maybe it will be helpful for you.
Solution #1:
Image vertical and horizontally center inside div
.thumb-container {
position: relative;
width: 60px;
padding-bottom:45px; /* padding is using for the height of image */
margin: 0px;
overflow: hidden;
border: 1px solid black;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=80&h=50"></div>
</div>
View on Jsfiddle https://jsfiddle.net/5az8u7bj/
Solution #2: Image vertical and horizontally center width:100% inside div fully cover image box no white space
.thumb-container {
position: relative;
padding-bottom:45px;
margin: 0px;
overflow: hidden;
border: 1px solid black;
width:60px;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: -100%;
height:100%;
margin: auto;
width: auto;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=500&h=200"></div>
</div>
View on JSfiddle https://jsfiddle.net/2d6x3fn6/1/
Maybe these solution will be helpful for you
I have an absolute positioned div and an image inside it, can I vertically allign the image to the center of the previous div? It might look like a repost and actually might be, but i couldn't find an answer to suit me.
<div id="filteredImgContainer">
<img id="loading" src="images/loader.gif" height="328" alt="" />
</div>
css:
#filteredImgContainer {
height: 328px;
width: 251px;
max-height: 328px !important;
max-width: 251px !important;
position: absolute;
left: 340px;
top: 196px;
}
.filteredImg {
display:block;
margin:auto;
height: auto !important;
width: auto !important;
max-height: 328px !important;
max-width: 251px !important;
}
i've tried this and it worked:
#filteredImgContainer
{
height: 100px;
width: 100px;
max-height: 328px !important;
max-width: 251px !important;
position: absolute;
border:solid 1px black;
}
#loading
{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
If you set .filteredImgContainer > img { display: inline-block; vertical-align: middle; } That should align the element to the middle of the containing div. Then you can style the containing div to move the image where you want it to go.
If your img element is meant to have the class .filteredImg then change display: block to display: inline-block and add your vetical-align: middle;.
Adding following after your CSS rules will align the image to center
#filteredImgContainer:before{width: 1px; display: inline-block; height: 328px; vertical-align: middle; content: ''; margin-left: -1px;}
#loading{ vertical-align: middle; }
I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.