My webpage uses bootstrap to display content, and while I've managed to center my images vertically, I'm facing an issue with horizontal centering.
I want to ensure that any image, regardless of size, remains within the column/row and adjusts its size responsively. Additionally, I need the image to be perfectly centered in the container if it's smaller than the container itself.
What am I missing to achieve perfect horizontal and vertical alignment for images, unless specified otherwise?
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img {
max-width: 100%;
height:auto;
margin:0 auto;
}
.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
/*background-image: url('images/bg_green.svg');*/
background-size: cover;
}
<div class="row middle" id="middle" style="background-image: url();">
<div class="col-lg-12" id="fullColumn">
<div class="fullContent" id="fullContent" style="height: 100%; ">
</div>
</div>
</div>
Update:
Current situation (image is vertically centered but too high) vs. desired output (centered both vertically and horizontally) https://i.sstatic.net/zFgW6.png
UPDATE:
Multiple DIVS
.topLeftContent{
display:flex;
justify-content:center;
align-items:center;
}
.bottomLeftContent{
display:flex;
justify-content:center;
align-items:center;
}
.rightQtrContent{
display:flex;
justify-content:center;
align-items:center;
}
<div class="col-lg-6" id="rightColumnQtrHalf" >
<div id="rightQtrContent" style=" height: 100%; ">
</div>
</div>