PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 9, 2022

[FIXED] How to display text above arrows which are between div boxes

 November 09, 2022     css, html, javascript     No comments   

Issue

Question:

I have div boxes lined side by side with arrows pointing. I want to write content above the arrow using html css. How can I do that?

    #border {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    
    #borders {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    
    #borderss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    
    #bordersss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    .arrow {
    font-size: 105px;
    color: red;
    width:115%
    }
    <div id="border"></div><span class="arrow">&#8594;</span>
    <div id="borders"></div>
    <span class="arrow">&#8594;</span>
    <div id="borderss"></div>
    <span class="arrow">&#8594;</span>
    <div id="bordersss">
    </div>

Codepen link: https://codepen.io/acqafqe/pen/yLEJgVv


Solution

I did it adding flex-layout and some additional styles:

Presentation

View Preview

    #main-content {
      display: flex;
      flex-direction: row;
      align-items: center;
    }


    #border {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }

    #borders {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }

    #borderss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }

    #bordersss {
      height: 80px;
      width: 10%;
      border: 1px black solid;
      display: inline-block;
    }
    .arrow {
      font-size: 105px;
      color: red;
      width:100px;
      margin-top: -60px;
    }

    .arrow-flex {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;
    }
    <div id="main-content">

        <div id="border"></div>
        <div class="arrow-flex">
          <span>text</span>
          <span class="arrow">&#8594;</span>
        </div>
  
        <div id="borders"></div>
  
        <div class="arrow-flex">
          <span>text</span>
          <span class="arrow">&#8594;</span>
        </div>
  
        <div id="borderss"></div>
  
        <div class="arrow-flex">
          <span>text</span>
          <span class="arrow">&#8594;</span>
        </div>  
    
        <div id="bordersss">
        </div>
    </div>



Answered By - Bryan Carrera
Answer Checked By - Clifford M. (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing