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 could I make a textarea dynamically resize with the chrome app window?

    Two buttons vertically misaligning, how to align them properly?

    How do i select all nodes and apply a css style to all of them, D3

    ckeditor - how to get custom-css with id to work?

    How to implement ::ms-clear in CSS?

    How to mark up a tiled layout with CSS?

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    How to Change CSS style of the same element that is NOT Hovered

    How do I vertically align my wrapper so it will be centered on a (mobile) screen?

    How to use jQuery to find a certain string within a div, and then apply specific styles to another div if it exists? [closed]

    How to differentiate the common css class by using other css class

    How to set style for a column in an extjs 4 grid [closed]

    How to change css for each additional innerHTML element in a javascript for loop

    How to add slide animation when showing elements

    How to change or disable the alternating background colors in Google Prettify

    How to select 3rd 'a' tag in a list for RSpec test?

    iOS not showing element on right: 0/float: right

    How to add another text decoration definition with Javascript?

    How to remove the blank between div.sons?

    Show/Hide Div's via | Save Scrollbar | Save State

    How to apply a CSS class to another element when an object is hovered?

    How to load CSS into CodeIgniter

    How can I find the CSS3 rotation of an element?

    How to add javascript expression's output to my CSS?

    How can i add a css rule for this code?

    How to modify the orientation of a
      spanning multiple columns?

    how to add same width on bootstrap dropdown menu item as parent item

    how to choose correct css class to change element

    How to position an element at the TOP LEFT corner of a page using CSS?