Css - Versionsgeschichte

F: /* Mit Flexbox Vertikal Zentrieren */

2018-11-24T19:39:14Z

Mit Flexbox Vertikal Zentrieren

← Nächstältere Version		Version vom 24. November 2018, 19:39 Uhr
Zeile 177:		Zeile 177:
	flex-direction: column;		flex-direction: column;
	justify-content: center;		justify-content: center;
			/* justify-content: space-between; */
	}		}
	</source>		</source>

2017-10-20T17:30:12Z

Mit Flexbox

← Nächstältere Version		Version vom 20. Oktober 2017, 17:30 Uhr
Zeile 170:		Zeile 170:


	====Mit Flexbox ====		====Mit Flexbox Vertikal Zentrieren ====
	Eltern ~~element~~ mit folgender Klasse/ bzw Regeln versehen		Eltern Element mit folgender Klasse/ bzw Regeln versehen
	<source lang="css">		<source lang="css">
	.parent {		.parent {

2017-10-20T17:29:36Z

div mittig ausrichten

@@ Zeile 165: / Zeile 165: @@
 		</div>
 	</div> <!-- << ist nur für die Veranschaulichung -->
 </source>

2014-10-07T14:19:00Z

div vertikal mittig ausrichten

← Nächstältere Version		Version vom 7. Oktober 2014, 14:19 Uhr
Zeile 109:		Zeile 109:

	=== div vertikal mittig ausrichten ===		=== div vertikal mittig ausrichten ===
			'''CSS:'''
	<source lang="css">		<source lang="css">
	/* .mfp-wrap {		/*.mfp-wrap {
	height: 100%;		height: 100%;
	position: fixed;		position: fixed;
	}*/		}*/
	.mfp-container:before {		.mfp-container:before {
	content: "";		content: "";
	display: inline-block;		display: inline-block;
	height: 100%;		height: 100%;
	vertical-align: middle;		vertical-align: middle;
	}		}
			.mfp-content {
	.mfp-content {		display: inline-block;
	display: inline-block;		background-color: green;
	/vertical-align: middle;/		/vertical-align: middle;/
	~~background-color: green;~~		}
	}
	</source>		</source>

			'''html:'''
	<source lang="html4strict">		<source lang="html4strict">
	vorher		vorher
	<!--<div class="mfp-wrap">-->		<!--<div class="mfp-wrap">-->
	<div class="mfp-container">		<div class="mfp-container">
	<div class="mfp-content">test</div>		<div class="mfp-content">test</div>
	</div>		</div>
	<!--</div>-->		<!--</div>-->
	nachher		nachher
	</source>		</source>

2014-10-07T14:17:30Z

div ausrichten

← Nächstältere Version		Version vom 7. Oktober 2014, 14:17 Uhr
Zeile 107:		Zeile 107:

	== div ausrichten ==		== div ausrichten ==

			=== div vertikal mittig ausrichten ===
			<source lang="css">
			/* .mfp-wrap {
			height: 100%;
			position: fixed;
			}*/
			.mfp-container:before {
			content: "";
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			}

			.mfp-content {
			display: inline-block;
			/vertical-align: middle;/
			background-color: green;
			}
			</source>

			<source lang="html4strict">
			vorher
			<!--<div class="mfp-wrap">-->
			<div class="mfp-container">
			<div class="mfp-content">test</div>
			</div>
			<!--</div>-->
			nachher
			</source>

	=== div mittig ausrichten ===		=== div mittig ausrichten ===

2014-08-14T14:07:25Z

divs unten ausrichten

← Nächstältere Version		Version vom 14. August 2014, 14:07 Uhr
Zeile 171:		Zeile 171:

	* [http://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]		* [http://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]
			* [http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height im kommentar eine interessante lösung, leider nur mit absoluten werden]

2014-06-13T17:52:31Z

div mittig ausrichten

← Nächstältere Version		Version vom 13. Juni 2014, 17:52 Uhr
Zeile 111:		Zeile 111:
	'''css'''		'''css'''
	<source lang="css">		<source lang="css">
	.aussen-~~vertikal~~ {		.aussen-horizontal {
	text-align: center;		text-align: center;
	}		}
	.innen-~~vertikal~~ {		.innen-horizontal {
	display:inline-block;		display:inline-block;
	}		}
Zeile 123:		Zeile 123:
	<source lang="html4strict">		<source lang="html4strict">
	<div style="background-color: greenyellow; width:600px; height:600px;"> <!-- << ist nur für die Veranschaulichung -->		<div style="background-color: greenyellow; width:600px; height:600px;"> <!-- << ist nur für die Veranschaulichung -->
	<div class="aussen-~~vertikal~~" style="background-color: grey;">		<div class="aussen-horizontal" style="background-color: grey;">
	<div class="innen-~~vertikal~~" style="background-color: white;">		<div class="innen-horizontal" style="background-color: white;">
	Inhalt		Inhalt
	<table>		<table>
Zeile 135:		Zeile 135:
	</div> <!-- << ist nur für die Veranschaulichung -->		</div> <!-- << ist nur für die Veranschaulichung -->
	</source>		</source>

	=== divs unten ausrichten ===		=== divs unten ausrichten ===

2014-06-13T17:32:33Z

div ausrichten

← Nächstältere Version		Version vom 13. Juni 2014, 17:32 Uhr
Zeile 107:		Zeile 107:

	== div ausrichten ==		== div ausrichten ==

			=== div mittig ausrichten ===
			'''css'''
			<source lang="css">
			.aussen-vertikal {
			text-align: center;
			}
			.innen-vertikal {
			display:inline-block;
			}
			</source>


			'''html'''
			<source lang="html4strict">
			<div style="background-color: greenyellow; width:600px; height:600px;"> <!-- << ist nur für die Veranschaulichung -->
			<div class="aussen-vertikal" style="background-color: grey;">
			<div class="innen-vertikal" style="background-color: white;">
			Inhalt
			<table>
			<tr><td>1.1</td><td>1.2</td></tr>
			<tr><td>2.1</td><td>2.2</td></tr>
			</table>
			<img height="199px" width="150px" src="https://ubohl.netz.coop/typo3temp/yag/00/001_wiese_2_539b305495bac.jpg" />
			</div>
			</div>
			</div> <!-- << ist nur für die Veranschaulichung -->
			</source>
	=== divs unten ausrichten ===		=== divs unten ausrichten ===

2014-05-20T10:34:01Z

divs unten ausrichten

← Nächstältere Version		Version vom 20. Mai 2014, 10:34 Uhr
Zeile 108:		Zeile 108:
	== div ausrichten ==		== div ausrichten ==
	=== divs unten ausrichten ===		=== divs unten ausrichten ===

			das innere element wird im äusseren Element unten ausgerichtet

	'''css'''		'''css'''
	<source lang="css">		<source lang="css">
Zeile 122:		Zeile 125:
	'''html'''		'''html'''
	<source lang="html4strict">		<source lang="html4strict">


			<div class="aussen">
			<img class="innen" />
			</div>

			mit einem link dazwischen
	<div class="aussen">		<div class="aussen">
	<a href="ein/a/wird/ignoriert/">		<a href="ein/a/wird/ignoriert/">
Zeile 128:		Zeile 138:
	</div>		</div>
	</source>		</source>

			* der a tag ist hier nur zusätzlich eingefügt um zu zeigen das dieses in der ausrichtung einfach ignoriert wird ... sprich

	* [http://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]		* [http://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]

2014-05-20T10:32:03Z

div ausrichten

← Nächstältere Version		Version vom 20. Mai 2014, 10:32 Uhr
Zeile 110:		Zeile 110:
	'''css'''		'''css'''
	<source lang="css">		<source lang="css">
			.aussen {
			position: relative;
			}
			.innen {
			position: absolute;
			bottom: 0;
			}
			</source>


	~~</source>~~
	'''html'''		'''html'''
	<source lang="html4strict">		<source lang="html4strict">
			<div class="aussen">
			<a href="ein/a/wird/ignoriert/">
			<img class="innen" />
			</a>
			</div>
	</source>		</source>
	* [http://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]		* [http://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]