I'm struggling to figure out how to bring the text between the two images to the front without separating them.
The images should be positioned next to each other with a negative square in-between, and the text within this square should be centered both horizontally and vertically.
I've experimented with various CSS properties like position: relative, absolute, as well as dividing it into three separate divs but haven't had success. Any guidance would be appreciated. Thank you!
body {
color: white;
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
img1 {
height: 50%;
width: 50%;
}
.aligncenter {
text-align: center;
}
.hiddenText {
display: none;
}
.inline {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<br>
<br>
<div>
<p class="aligncenter">
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>
This Text
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>
</p>
</div>
</body>
</html>