diedVIPs

html knowhow

Etwas mit DIV positionieren










Button mit DIV positionieren

So sieht´s aus



Quellcode
<html>
<head>
<style type="text/css">
.container {margin-left:30%; width :40%; height: 200px; border: 3px solid green; text-align:center;}
.vertical-center {padding-top: 20%;}
</style>
</head>

<body>
<div class="container">
<div class="vertical-center">
<button>Zentrierter Button</button>
</div>
</div>
</body>

</html>




Text mit DIV oben links positionieren

So sieht´s aus

Text mit DIV oben links positionieren


Quellcode
<html>
<head>
<style type="text/css">
.box {margin-left:20%; width :40%; height: 200px; border: 3px solid blue;}
.center {padding-top: 10%;padding-left:10%;padding-top:5%}
</style>
</head>

<body>
<div class="box">
<div class="center">
Text mit DIV oben links positionieren</div>
</div>
</body>

</html>




Text mit DIV unten rechts positionieren

So sieht´s aus

Text mit DIV unten rechts positionieren


Quellcode
<html>
<head>
<style type="text/css">
.tab {margin-left:20%; width :40%; height: 200px; border: 3px solid blue;}
.rechts {padding-top: 10%;padding-left:10%;padding-top:5%}
</style>
</head>

<body>
<div class="tab">
<div class="rechts">
Text mit DIV unten rechts positionieren</div>
</div>
</body>

</html>








Kontakt    Datenschutz    Impressum