I have an absolute positioned div inside a Bootstrap column (relative positioned) neither the absolute div or the column have a defined height. However the column div has a min-height of 400px.
html
<section class="row row-eq-height">
<div class="col-sm-6">
<div class="section-content">
... content ...
</div>
</div>
<div class="col-sm-6 section-img">
... full cover image ...
</div>
</div>
css
#media screen and (max-width: 768px) {
.section-content { position: absolute; }
.section-img { min-height: 400px; }
.row-eq-height {
position: relative;
min-height: 400px;
}
When the screen in 768px the .section-content div goes on-top on the .section-img div. The height of the column is generated by the min-height put on the .section-img.
I'm trying to vertically center the .section-content inside the column/.section-img.
//////
You don't have to use tables. And if I understand you correctly, as Rob stated, create an inner wrapper and set the display property for the parent container to table and inner wrapper to table-cell with vertical-align: middle;
<div class="col-sm-6 section-img">
<div class="middle">... full cover image ...</div>
</div>
Here's the CSS
.section-img {
min-height: 400px;
display: table;
}
.middle {
display: table-cell;
vertical-align: middle;
}
Related
Can someone help me with this? I want make this design, But I have problem with position. Here is image
Here is code
> https://plnkr.co/edit/Smyes7rZXVcqq5IugW2o?p=preview
The below skeleton will work for you best.
Set parent div's height and display to table (min-height won't work for you here). You can vertically align contents inside the parent div if you set child div's display to table-cell and vertical-align to middle. The child content will automatically align vertically even if the content height changes.
<div class="container">
<div class="col-sm-6 left">
<div class="inner">
<span>become our partner</span>
contact us
</div>
</div>
<div class="col-sm-6 right">
//right side content
</div>
</div>
.left{
height: 500px;
background: #ccc;
display: table;
}
.inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner span, .inner a{
display: block;
text-transform: uppercase;
}
I am using bootstrap templates and have split the page into a fixed sidebar and the remaining part of the page is one big picture. However the picture will not match the height of the sidebar. There is always a white gap after the picture even though the sidebar has 100% height. So how can i make my picture take up 100% height?
My html:
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<div class="sidebar affix">
</div>
</div>
<div class="col-sm-9 pic">
<div><img src ="homepage/pic5.jpg" class="img-responsive"></div>
</div>
</div>
</div>
My Css:
.row.content {
height: 684px;
}
.sidenav {
height: 100%;
}
.pic .img-responsive {
height: 100%;
}
.pic {
padding: 0;
position: relative;
}
.sidebar {
width: 22.5%;
top: 0px;
}
.pic > div {
position: absolute;
}
Try to change like this
.pic > .img-responsive {
height: 100%;
}
You are placing your img in an div which you give position absolute, while you give the img position relative in the div with position absolute.
position: absolute
Places an element absolute, meaning on its self. There for any heights or width of any elements around it will not effect the element, it is absolute.
I havent tested it but you should remove the position:absolute, position:relative and the div around your img.
I have three divs, all inline under a parent div. And my goal is to make middle div ALWAYS in the centre of the parent div. While rest two side divs are responsive. In left hand side div, text is align to right while in left hand side div, its aligned to left. And middle div's width is fixed, say 80px. Parent div's max and min width are also set. I have this:
<div style="max-width: 500px;min-width:450px;">
<div style="display:inline-block;text-align:right;">Posted by</div>
<div style="display:inline-block;text-align:center;width:80px;">
<img src="default.png" style="width:80px;height:20px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">
</div>
<div style="display:inline-block;">Johnathan Bestualzaukazoa</div>
</div>
I want to have something like this:
But middle div is not always in center. As side divs content push them.So how can I achieve it?
I suggest to use this CSS table layout for it. I set 50% on both left and right sides, and middle one with an image. Because it's table layout it won't break, instead it will re-calculate the value of 50% and display the best width "(100% - image width) / 2" available automatically.
jsfiddle
.container {
display: table;
border: 2px solid grey;
margin: 20px auto;
}
.container > div {
display: table-cell;
}
.left, .right {
width: 50%;
padding: 0 10px;
}
.left {
text-align: right;
}
.middle img {
vertical-align: middle;
}
.right {
text-align: left;
}
.container1 { width: 500px; }
.container2 { width: 400px; }
.container3 { width: 300px; }
<div class="container container1">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container2">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container3">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
Need to solve this little task:
Center vertically and horizontally IMAGE in DIV.
DIV height must be proportional to width.
DIV width is stretchable (for example 50% of parent div).
IMAGE width and height = auto (it must fill div if its width or height > than div width or height, and have primary size if its < div size, and stay proportional).
I know how to make 2 and 3.
HTML:
<div class="container">
<img src="img.png"/>
</div>
CSS:
.container {
width: 100%;
height: 0;
padding-bottom: 100%;
}
But how to center and middle IMAGE in this DIV?
There is a lot of ways to make 1 task with non proportional and non strechable div.
But I dont know how to make it all in full house of tasks.
Can you help? HTML and CSS may be any.
Did you try :
.container img {
vertical-align : middle
}
? It will verticaly align your image.
Try this:
<style>
.container
{
width :100%;
height :100%;
display :table;
}
.child
{
vertical-align :middle;
display :table-cell;
}
.child img
{
display :block;
width :50%;
margin :0 auto;
}
</style>
<div class="container">
<div class="child">
<img src="img.png"/>
</div>
</div>
Solved it by myself. Check here: http://jsfiddle.net/42trk8ux/17/
HTML:
<div class="width-50">
<div class="parent">
<div class="aspect"></div>
<div class="block">
<div class="tbl">
<div class="tbl-cell">
<img src="img.jpg"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.width-50{
width:50%
}
.parent{
position: relative;
}
.aspect
{
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
}
.block{
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: block;
}
.tbl{
display: table;
width: 100%;
height: 100%;
position: absolute;
}
.tbl-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
background: #aaa;
}
.tbl-cell img{
max-width:100%;
max-height:100%;
}
I want to vertically and horizontally center a div using the "table-cell" method because is not requiring a specific height, but unfortunately is not working without specifying a height.
Why is not working ?
I have this markup:
<section class="content-01 v-center">
<div>
<div class="container">
<div class="slogan text-center">
<h1>VERTICAL CENTERING</h1>
</div>
</div>
</div>
and this css:
.content-01.v-center {
display: table;
width: 100%;
}
.content-01.v-center>div {
display: table-cell;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
float: none;
}
And here is a jsfiddle
Any ideas what am I doing wrong ?
Thanks!
The problem here is that the html and body tags end before the bottom of the viewport:
At the very least you would have to tell the browser that the height of the html and body elements is at least 100%:
html, body {
height: 100%;
}
As well as specifying a height for the container section:
.content-01.v-center {
/* ... */
height: 100%;
}
Here's an updated fiddle: http://jsfiddle.net/2ntK2/3/