I am trying to have the text between the two images come to the front and not separate the images.
The images should come together with a square-negative in-between and within this square the text should be, centered horizontally and vertically
I have tried position: relative, absolute. I have tried separating it into three divs etc. Not sure how to go about it. Thank you!
JavaScript
x
45
45
1
body {2
color: white;3
background-color: black;4
}5
6
ul {7
list-style-type: none;8
margin: 0;9
padding: 0;10
overflow: hidden;11
background-color: #333;12
}13
14
li {15
float: left;16
}17
18
li a {19
display: block;20
color: white;21
text-align: center;22
padding: 14px 16px;23
text-decoration: none;24
}25
26
li a:hover {27
background-color: #111;28
}29
30
img1 {31
height: 50%;32
width: 50%;33
}34
35
.aligncenter {36
text-align: center;37
}38
39
hiddenText {40
display: none;41
}42
43
inline {44
display: inline-block;45
}JavaScript
1
23
23
1
<!DOCTYPE html>2
<html>3
<head>4
</head>5
6
<body>7
<ul>8
<li><a class="active" href="#home">Home</a></li>9
<li><a href="#news">News</a></li>10
<li><a href="#contact">Contact</a></li>11
<li><a href="#about">About</a></li>12
</ul>13
<br>14
<br>15
<div>16
<p class="aligncenter">17
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>18
This Text19
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>20
</p>21
</div>22
</body>23
</html>Advertisement
Answer
You can do it by giving the parent element position: relative and put the text into a container such as <span> or similar and give it this CSS:
JavaScript
1
5
1
position: absolute;2
top: 50%;3
left: 50%;4
transform: translate(-50%, -50%);5
Test:
JavaScript
1
56
56
1
body {2
color: white;3
background-color: black;4
}5
6
ul {7
list-style-type: none;8
margin: 0;9
padding: 0;10
overflow: hidden;11
background-color: #333;12
}13
14
li {15
float: left;16
}17
18
li a {19
display: block;20
color: white;21
text-align: center;22
padding: 14px 16px;23
text-decoration: none;24
}25
26
li a:hover {27
background-color: #111;28
}29
30
img1 {31
height: 50%;32
width: 50%;33
}34
35
.pos-relative {36
position:relative;37
}38
39
.aligncenter {40
text-align: center;41
}42
43
hiddenText {44
display: none;45
}46
47
#centerText {48
position: absolute;49
top: 50%;50
left: 50%;51
transform: translate(-50%, -50%);52
}53
54
inline {55
display: inline-block;56
}JavaScript
1
23
23
1
<!DOCTYPE html>2
<html>3
<head>4
</head>5
6
<body>7
<ul>8
<li><a class="active" href="#home">Home</a></li>9
<li><a href="#news">News</a></li>10
<li><a href="#contact">Contact</a></li>11
<li><a href="#about">About</a></li>12
</ul>13
<br>14
<br>15
<div>16
<p class="aligncenter pos-relative">17
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>18
<span id="centerText">This Text</span>19
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>20
</p>21
</div>22
</body>23
</html>