CODEWITHSUNDEEP
htmlcss
Sara Ree
Sara Ree

Reputation: 3543

Position two arrows to the left and right of the text

I want to put two arrows around the text in the code below (to the left and right of the text):

const contrast = document.getElementById("contrast");

function contrastShow(text) {
  contrast.innerHTML = text;
  contrast.classList.add("contrastShow");
  contrast.classList.remove("contrastHide");
}

contrastShow("This is the text");
.contrast-container {
  overflow: hidden;
  height: 10vh;
  width: 100%;
  z-index: 11;
  /*outline: 0.1vw dashed orange;*/
}

.vertical-center-contrast {
  position: absolute;
  top: 73.5vh; /*top: 82vh;*/
  padding-top: 10px;
  margin: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.contrast {
    position: relative;
    font-family: "Vazir";
    direction: rtl;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    text-align: center;
    width: 100%;
    font-size: 2vw;
    color: rgb(248, 247, 250);
    opacity: 0;  
    margin: 0 auto;
}

.contrastShow {
    animation: contrastAnimeShow 0.3s ease-in-out;
    animation-fill-mode: forwards ;
}

@-webkit-keyframes contrastAnimeShow {
  0%    { opacity: 0; top: 4vh }
  100%  { opacity: 1; top: 1.2vh }
}

.left-arrow {
  position: relative;
}
<div class ="vertical-center-contrast contrast-container">
       <span class="left-arrow">&#8250;</span>
           <p id="contrast" class="contrast"></p>
           <span class="right-arrow">&#8249;</span>
</div>

I create two spans with html code of arrows to create arrows and text in-line with no luck...

Upvotes: 0

Views: 88

Answers (2)

benhatsor
benhatsor

Reputation: 2033

Wrap the arrows with an invisible element, then position them with justify-content.

const contrast = document.getElementById("contrast");

function contrastShow(text) {
  contrast.innerHTML = text;
  contrast.classList.add("contrastShow");
  contrast.classList.remove("contrastHide");
}

contrastShow("This is the text");
.contrast-container {
  overflow: hidden;
  height: 10vh;
  width: 100%;
  z-index: 11;
  position: relative;
  outline: 0.1vw dashed orange;
}

.vertical-center-contrast {
  position: absolute;
  top: 73.5vh;
  /*top: 82vh;*/
  padding-top: 10px;
  margin: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.contrast {
  position: relative;
  font-family: "Vazir";
  direction: rtl;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
  text-align: center;
  width: 100%;
  font-size: 2vw;
  color: rgb(248, 247, 250);
  opacity: 0;
  margin: 0 auto;
}

.contrastShow {
  animation: contrastAnimeShow 0.3s ease-in-out;
  animation-fill-mode: forwards;
}

.arrows {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@-webkit-keyframes contrastAnimeShow {
  0% {
    opacity: 0;
    top: 4vh
  }
  100% {
    opacity: 1;
    top: 1.2vh
  }
}
<div class="vertical-center-contrast contrast-container">
  <div class="arrows">
    <span class="right-arrow">&#8249;</span>
    <span class="left-arrow">&#8250;</span>
  </div>
  <p id="contrast" class="contrast">Some text</p>
</div>

If you want space between each arrow (and text), you can use:

const contrast = document.getElementById("contrast");

function contrastShow(text) {
  contrast.innerHTML = text;
  contrast.classList.add("contrastShow");
  contrast.classList.remove("contrastHide");
}

contrastShow("Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text");
.contrast-container {
  overflow: hidden;
  height: 10vh;
  width: 100%;
  z-index: 11;
  position: relative;
  outline: 0.1vw dashed orange;
}

.vertical-center-contrast {
  position: absolute;
  top: 73.5vh;
  /*top: 82vh;*/
  padding-top: 10px;
  margin: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.contrast {
  position: relative;
  font-family: "Vazir";
  direction: rtl;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
  text-align: center;
  width: 100%;
  font-size: 2vw;
  color: rgb(248, 247, 250);
  opacity: 0;
  white-space: normal;
  word-break: break-all;
  width: calc(100% - 40px);
  left: 20px;
  margin-top: 0;
}

.contrastShow {
  animation: contrastAnimeShow 0.3s ease-in-out;
  animation-fill-mode: forwards;
}

.arrows {
  width: calc(100% - 20px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@-webkit-keyframes contrastAnimeShow {
  0% {
    opacity: 0;
    top: 4vh
  }
  100% {
    opacity: 1;
    top: 1.2vh
  }
}
<div class="vertical-center-contrast contrast-container">
  <div class="arrows">
    <span class="right-arrow">&#8249;</span>
    <span class="left-arrow">&#8250;</span>
  </div>
  <p id="contrast" class="contrast"></p>
</div>

Upvotes: 1

Tom Groot
Tom Groot

Reputation: 1180

There are multiple ways to do this. The most easy way is to add display: flex; to your vertical-center-contrast

const contrast = document.getElementById("contrast");

function contrastShow(text) {
  contrast.innerHTML = text;
  contrast.classList.add("contrastShow");
  contrast.classList.remove("contrastHide");
}

contrastShow("This is the text");
.contrast-container {
  /*overflow: hidden;*/
  height: 10vh;
  width: 100%;
  z-index: 11;
  /*outline: 0.1vw dashed orange;*/
}

.vertical-center-contrast {
  /*position: absolute;*/
  /*top: 73.5vh;*/
  padding-top: 10px;
  margin: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
}

.contrast {
    position: relative;
    font-family: "Vazir";
    direction: rtl;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    text-align: center;
    width: 100%;
    font-size: 2vw;
    color: rgb(248, 247, 250);
    opacity: 1;  
    margin: 0 auto;
}

.left-arrow {
  position: relative;
}
<div class ="vertical-center-contrast contrast-container">
       <span class="right-arrow">&#8249;</span>
       <p id="contrast" class="contrast">ddd</p>
       <span class="left-arrow">&#8250;</span>
</div>

Upvotes: 2

Related Questions