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!
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>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:
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Test:
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%;
}
.pos-relative {
position:relative;
}
.aligncenter {
text-align: center;
}
hiddenText {
display: none;
}
#centerText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
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 pos-relative">
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>
<span id="centerText">This Text</span>
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>
</p>
</div>
</body>
</html>