Issue
I have a page with Twitter Bootstrap container-fluid class div, one row and one col-md-6 inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a div inside that column, that I want to be in the center of the column.
<body>
<div class="container-fluid cont">
<div class="row logoRow">
<div class="col-md-6 logoCol">
<div class="logoCont center-block"></div>
</div>
</div>
</div>
</body>
And the style is:
html, body {
height: 100%;
}
.cont {
height: 100%;
background: blue;
}
.logoRow {
height: 50%;
background: green;
}
.logoCol {
height: 100%;
background: yellow;
}
.logoCont {
height: 50%;
width: 50%;
background: red;
}
Here is my fiddle of this: http://jsfiddle.net/p9ou30g7/2/
Adding a center-block class to inner div aligned it to horizontal center, but I also need to align it vertically to the center of the column.
So that red div is in the center of the yellow one.
How can this be done?
Solution
This is one way to do it, and is more crossbrowser supported than flexbox.
http://jsfiddle.net/p9ou30g7/3/
.logoCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 50%;
width: 50%;
background: red;
}
There are other ways that you can check out here: https://css-tricks.com/centering-css-complete-guide/
Answered By - Muhammad Umer Answer Checked By - David Goodson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.