Tag Archive for align

how to align controls left, center and right

<mx:Grid width="100%" >
     <mx:GridRow width="100%" >
          <mx:GridItem horizontalAlign="left"  width="33%" >
               <s:Label text="Left" />
          </mx:GridItem>

          <mx:GridItem horizontalAlign="center"  width="33%" >
               <s:Label text="center" />
          </mx:GridItem>

          <mx:GridItem horizontalAlign="right"  width="34%" >
               <s:Label text="Right" />
          </mx:GridItem>
     </mx:GridRow>

</mx:Grid>

source

jQuery plugin: Vertical Align

(function($){

	$.fn.extend({ 
 		
 		verticalAlign: function() {

			//Iterate over the current set of matched elements
    		return this.each(function() {
	
				var obj = $(this);
	
				// calculate the new padding and height
				var childHeight = obj.height();
				var parentHeight = obj.parent().height();
				var diff = Math.round( ( (parentHeight - childHeight) / 2) );

				// apply new values
				obj.css( { "display": "block", "margin-top": diff } );
			
    		});
    	}
	});
			
})(jQuery);

source

align environment without margins

@align”>start@align@nest@rredtruem@ne
}%
{endalign}
makeatother
source

jQuery vertically align function

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);

source

Center align a div horizontally and bottom of the page

HTML:
<div class="parent">
<div class="child">
Content here
</div>
</div>

CSS:
.parent{
position:fixed;
bottom:0px;
width:100%; //width should be 100%
}
.child{
width:100px; //min width should give to center the div.
margin:0px auto; //here it will make center
}

source

Vertical align Content

<style>
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
</style>

<div id="floater">
<div id="content">
Content goes here
</div>
</div>

source

Align to Center

public static function alignToCenter(obj:DisplayObject):void
{
obj.x = obj.stage.stageWidth / 2 - obj.width / 2;
obj.y = obj.stage.stageHeight / 2 - obj.height / 2;
}

source

Vertical align text in floating div using css

HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

source

CSS Horizontally and Vertically Center Element

/* This will horizontally and vertically center an element, but
requires that the height and width of it are known */
.centered
{
width:16px;
height:16px;
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-8px;
}

source

CSS image align absmiddle

<img src="image.gif" style="vertical-align:middle;" alt="" />

source