Text in box should be middle-aligned

i working on design gallery page on website page work in progress:

http://www.vintagetextile.com/gallery_designer_new.htm

 

the problem arises in small tablet viewport (max-width:700px). if narrow viewport between 521px , 700px, see text within ".item.descript" incorrectly top-aligned, though style "vertical-align:middle" should have been inherited selector ".item>div".

 

 

 

 

.item {

overflow:hidden;}

.item > div {

	display:table-cell;
	vertical-align:middle;
	padding:0;}

 

.item .imagebox { padding-right:20px;}

.item:nth-child(odd) .descript {

padding-left:209px;}

.item:nth-child(even) {margin-left:209px;}

.item:nth-child(odd) {background-color:#e5e5e5;}

.item img

{display:inline-block;

	width:209px;
	height:325px;
	vertical-align:top;
	text-align:center;
	border:0 none;   /* ie */}

 

@media screen , (max-width:900px)

{ .item:nth-child(even) {margin-left:0px;}

    .item:nth-child(odd) .descript {padding-left:0;}

    .item + .item {margin-top:6px;}  

     .item p {font-size:.9375em;}}

@media screen , (max-width:700px)

      {  .item .imagebox {float:left;}

    .item .descript {display:block;}

    .item p {font-size:.9375em; margin-left:20px;} 

    h1 {text-align:center;}}

@media screen , (max-width:520px)

{.outer {width:auto;}

    .item .imagebox {

        display:block;

        float:none;

        text-align:center;

        padding-right:0;    }  

    .item p {margin:.25em 12px .75em;}

move below css class @media screen , (max-width:700px) @media screen , (max-width:520px) media query css rules.

 

.item .descript {display:block;}

More discussions in Dreamweaver support forum

adobe