Last active
August 29, 2020 12:29
-
-
Save JVJplus/b4502e9b2268112b7edec0ca0b87d4de to your computer and use it in GitHub Desktop.
Centering Text In Image Test JS Bin// source https://jsbin.com/pagamat
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
.tpouter{ | |
height:500px; | |
width:400px; | |
position: relative; | |
/* top: 50%; */ | |
/* left: 50%; */ | |
/* transform: translate(-50%, -50%); */ | |
background:yellow; | |
} | |
.tp{ | |
height:100px; | |
width:100px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
background:pink; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="tpouter"><div class="tp"></div></div> | |
<script id="jsbin-source-css" type="text/css">.tpouter{ | |
height:500px; | |
width:400px; | |
position: relative; | |
/* top: 50%; */ | |
/* left: 50%; */ | |
/* transform: translate(-50%, -50%); */ | |
background:yellow; | |
} | |
.tp{ | |
height:100px; | |
width:100px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
background:pink; | |
}</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tpouter{ | |
height:500px; | |
width:400px; | |
position: relative; | |
/* top: 50%; */ | |
/* left: 50%; */ | |
/* transform: translate(-50%, -50%); */ | |
background:yellow; | |
} | |
.tp{ | |
height:100px; | |
width:100px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
background:pink; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment