HTML/CSS Alignment-Layout

Positioning of different HTML elements within div elements with horizontal and vertical alignments

by webMac

HTML

<h1>HTML/CSS Alignment-Layout</h1>

<hr>

		<h2>Text (p)</h2>

		<div class="Row">
			<div class="Col TopLeft">
				<p>TopLeft</p>
			</div>
			<div class="Col TopCenter">
				<p>TopCenter</p>
			</div>
			<div class="Col TopRight">
				<p>TopRight</p>
			</div>
		</div>
		<br>
		<div class="Row">
			<div class="Col MiddleLeft">
				<p>MiddleLeft</p>
			</div>
			<div class="Col MiddleCenter">
				<p>MiddleCenter</p>
			</div>
			<div class="Col MiddleRight">
				<p>MiddleRight</p>
			</div>
		</div>
		<br>
		<div class="Row">
			<div class="Col BottomLeft">
				<p>BottomLeft</p>
			</div>
			<div class="Col BottomCenter">
				<p>BottomCenter</p>
			</div>
			<div class="Col BottomRight">
				<p>BottomRight</p>
			</div>
		</div>

<hr>

		<h2>Labels</h2>

		<div class="Row">
			<div class="Col TopLeft">
				<label>TopLeft</label>
			</div>
			<div class="Col TopCenter">
				<label>TopCenter</label>
			</div>
			<div class="Col TopRight">
				<label>TopRight</label>
			</div>
		</div>
		<br>
		<div class="Row">
			<div class="Col MiddleLeft">
				<label>MiddleLeft</label>
			</div>
			<div class="Col MiddleCenter">
				<label>MiddleCenter</label>
			</div>
			<div class="Col MiddleRight">
				<label>MiddleRight</label>
			</div>
		</div>
		<br>
		<div class="Row">
			<div class="Col BottomLeft">
				<label>BottomLeft</label>
			</div>
			<div class="Col BottomCenter">
				<label>BottomCenter</label>
			</div>
			<div class="Col BottomRight">
				<label>BottomRight</label>
			</div>
		</div>

<hr>

		<h2>Input type="text"</h2>

		<div class="Row">
			<div class="Col TopLeft">
				<input type="text" value="TopLeft">
			</div>
			<div class="Col TopCenter">
				<input type="text" value="TopCenter">
			</div>
			<div class="Col TopRight">
				<input type="text" value="TopRight">
			</div>
		</div>
		<br>
		<div class="Row">
			<div class="Col MiddleLeft">
				<input type="text" value="MiddleLeft">
			</div>
			<div class="Col MiddleCenter">
				<input type="text"...

CSS

.Row {
				display: table;

				/* optional */
				border-spacing: 5pt;
			}

			.Col {
				display: table-cell;

				/* optional */
				height: 75pt;
				width: 150pt;
				border:  1pt solid black;
				background-color: #99ff99;
			}

			.TopLeft {
				text-align: left;
  				align-items: left;
				vertical-align: top;
			}
			.TopCenter {				
				text-align: center;
  				align-items: center;
				vertical-align: top;
			}
			.TopRight {
				text-align: right;
  				align-items: right;  
				vertical-align: top;
			}

			.MiddleLeft {
				text-align: left;
				align-items: left;
				vertical-align: middle; 
			}
			.MiddleCenter {
				text-align: center;
				align-items: center;
				vertical-align: middle;
			}
			.MiddleRight {
				text-align: right;
				align-items: right;
				vertical-align: middle;
			}

			.BottomLeft {
				text-align: left;
				align-items: left;
				vertical-align: bottom;
			}
			.BottomCenter {
				text-align: center;
				align-items: center;
				vertical-align: bottom;
			}
			.BottomRight {
				text-align: right;
				align-items: right;
				vertical-align: bottom;
			}