advice about how to vertically center content in fluid element


Tags: css

Problem :

I have some content inside an article that is fluid in size, basically I have applied display:table to the parent element and then display:table-cell and vertical-align:middle to the element I wish to center. My problem is however that Im unable to make the element I want to center 100% height of the parent article and was wondering how I can achieve this?

I have built an example on jsfiddle: http://jsfiddle.net/f29Mr/

And here is the sample css

.m-level-block {
    width: 91.66667%;
    float: left;
    margin-right: 0%;
    display: inline;
    margin-left: 4.16667%;
    margin-right: 95.83333%;
    background: black;
    margin-bottom: 10px;
}
.m-level-block .m-video-thumb {
    width: 18.18182%;
    float: left;
    margin-right: 0%;
    display: inline;
}
.m-video-thumb .video-stats-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.m-level-block .level-content {
    width: 81.81818%;
    float: right;
    margin-right: 0;
    display: inline;
    position: relative;
    display: table;
    height: 100%;
}
.m-level-block .level-content .level-info {
    padding: 2%;
    width: 55.55556%;
    display: table-cell;
    vertical-align: middle;
    max-height: 400px;
    height: 100%;
}


Solution :

What I did here is simpler but you should easily see how this can work:

DEMO http://jsfiddle.net/f29Mr/3/

HTML

<div class="article">
    <div class="image">a</div>
    <div class="text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
    <div class="stats">HELLO</div>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
}

.article {
    width: 90%;
    height: 20%;
    margin: 0 auto;
    border: 1px solid #666;
    display:table;
}

.article .image {
    width: 20%;
    height: 100%;
    background: #F00;
    display: table-cell;
}

.article .text {
    width: 60%;
    height: 100%;
    display: table-cell;
    vertical-align:middle;
}

.article .stats {
    height: 20%;
    width: 19%;
    display:inline-block;
    vertical-align:middle;
    display: table-cell;
}

LINK TO YOUR CONTENT WITH ABOVE APPLIED: http://jsfiddle.net/f29Mr/4/


    CSS Howto..

    How to hide a soft hyphen (­) in HTML / CSS

    CSS, a Fixed Position Div with Dynamic Content - How to Position Another Div Underneath it?

    How to style focused and visited anchors when scrolling with CSS / jQuery

    How to resize a div container to fit overflow from a child div

    How to specify size of thumbnails for photos that are hosted externally?

    How to prevent rendering css when loading stylesheet from local storage?

    How to remove empty space in thumbnail grid

    If there is too many menu items how to gather them into collapsed menu

    How can I add padding to an element on my page?

    How to set div width to the width of the table in it?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    How can we create custom style for Jquery-ui dialog window in PHP?

    How to create the + button with CSS?

    How i can import LESS CSS in .net?

    How to add Bootstrap to Fullpage.js

    how to keep the aspect ratio of an image in bounding box - CSS

    How to limit a table cell to one line of text using CSS?

    How to solve css issue to display image caption?

    How do I (by default) style different types of labels differently?

    CSS: 2-column table, how to make one column as small as possible but no wrap and the other as big as possible?

    How can we wrap the line based on border size of windows browser?

    How to control the size of a table cell in css

    How to add spacing in between
    [duplicate]

    How to create diagonal boxes using css?

    How can I apply an existing CSS class style to a dynamically created div?

    How to apply global styles with CSS modules in a react app?

    How to scale a .svg being the background in a div?

    how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?

    h1:hover is responding on the whole width, unable to link h1 and don't know how to target things individually

    Show overlay fullscreen div then hide it by clicking on it