how to apply vertical-align: middle at div


Tags: html,css,vertical-alignment

Problem :

I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:

<div class="a">
   <div class="b">
       Unknown stuff to be centered.
   </div>
</div>

.a {
   display: table;
   width: 100%;
}
.b {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/

The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:

<div class="row">
    <div class="left">
        <p>Sample Text</p>
    </div>
    <div class="right">
        <p>Text</p>
        <p>Input Element</p>
        <p>Table</p>
        <p>Image</p>
    </div>
</div>
<div class="row">
    <div class="left">
        <p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
    </div>
    <div class="right">
        <p>Text</p>
        <p>Input Element</p>
        <p>Table</p>
        <p>Image</p>
    </div>
</div>
<div class="row">
    <div class="left">
        <p>Sample Text</p>
    </div>
    <div class="right">
        <p>Text</p>
        <p>Input Element</p>
        <p>Table</p>
        <p>Image</p>
    </div>
</div>

CSS:

.row {
    width: 100%;
    background: #ccc;
    border-bottom: 1px solid #999;
    display: table;
}
.left {
    float: left;
    width: 40%;
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
}
.right {
    float: right;
    background: #fff;
    width: 40%;
    padding: 20px;
}

How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different



Solution :

.left {
    width: 40%;
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
}

removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example


    CSS Howto..

    How to force margins to be ready from js before document ready

    How can I select first element with a specific class

    Developer Tools: How can I quickly check the difference in styles between normal state and :focus?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    CSS3 Menu Layout and Gradient not showing

    How to set a dynamic CSS value with JavaScript

    How do i position this element relative to an image?

    How to add nav icon images using max-width property in CSS

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to remove some css properties without the paticular one using regular expression?

    How to detect redraw rate (fps) of a css animation?

    How can I prevent a form-control from taking a new line in Bootstrap

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How to center icons in div consistently? [duplicate]

    How to write CSS3 animations with JavaScript objects?

    How do you run javascript with only a CSS class?

    How do I increase the size of the text contained?

    How can I set a specific border around an element?

    css hover : aligning on bottom: how to align on top?

    How to setup a ASP template

    How to give padding bottom for overflow hidden div?

    How to add custom layout and css in a CakePHP application?

    How to match an index of a CSS class with JavaScript?

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    jQuery - How to get elements height value and use it in another element via css code?

    how to collapse width of parent element to total width of child elements

    How to have different transistions for background-image and text in a div using CSS

    How to add JS and CSS file in web page based on parameter?

    How to align text below an image in CSS?