CODEWITHSUNDEEP
javascriptjavahtmlcss
Steven Hale
Steven Hale

Reputation: 226

Text between two images - The text comes to the front and the images are next to each other

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>

Upvotes: 2

Views: 63

Answers (2)

Minal Chauhan
Minal Chauhan

Reputation: 6158

You can use flexbox to center text using align-items:center

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;
}

.d-flex {
  display:flex;
  align-items: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="d-flex">
      <image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>
      <span>This Text</span>
      <image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>
    </p>
  </div>
</body>
</html>

Upvotes: 2

Ivan86
Ivan86

Reputation: 5708

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>

Upvotes: 4

Related Questions