Question 416369 in Html Question posted in
Some basic documentation can be found here.

Html – Align span with text and image at middle of text area by CSS

I need to align text and buttons at the right and middle of a text area; these three elements are in a cell of a table.
The best I’ve gotten is with this HTML snippet:

.fg_Erase {
  color: #880;
  margin-left: -12px;
  padding-right: 4px;
  border: none;
  background: rgba(0, 0, 0, 0)
}

.fg_Erase:hover,
img:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr>
    <td style='display: flex;'>
      <textarea cols="50" rows="5" id="bigT" name="bigT"></textarea>
      <button class="fg_Erase" onclick="$('bigT').value = ''">✘</button>
      <button type="button" name="info" id="info" class="fg_GButton">
      <img src="images/info.png" class="fg_alignImg"></button>
    </td>
  </tr>
</table>

However I had to insert the two objects into buttons with the unpleasant effect that the pointer cursor extends beyond the objects, i.e. it covers the height of the text area.
So two requests:

  1. how to obtain alignment without using buttons, but only span and img tags;
  2. how do you have the pointer cursor on the object only (text or image)?
Tags:

2

Answers


  1. 0

    I changed the first button to a span and removed the button around the img, as that sounded like your intent.

    I set the to grid, set columns and centering.

    /* EDIT Added */
.container_cell {
  display: grid;
  grid-template-columns: max-content 2rem 2rem;
  align-items: center;
}

.fg_Erase {
  color        : #880;
  margin-left  : -12px;
  padding-right: 4px;
  border       : none;
  background   : rgba(0, 0, 0, 0)
  }
.fg_Erase:hover, img:hover {
  cursor       : pointer;
  }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table>
  <tr>
      <!-- Moved styling for <td> into the .css file -->
      <td class="container_cell">
      <textarea cols="50" rows="5" id="bigT" name="bigT"></textarea>
      <span class="fg_Erase" onclick="$('bigT').value = ''">
        ✘
      </span>
        <!-- EDIT For snippet to work -->
        <!-- <img src="images/info.png" class="fg_alignImg"> -->
        <img src="https://placebear.com/30/30.jpg" class="fg_alignImg">
    </td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Apart from flex box and grid layout. You can achieve the same with positions relative and absolute.

    .fg_Erase {
  color: #880;
  height: 20px;
  width: 20px;
  text-align: center;
  margin-left: -12px;
  padding-right: 4px;
  border: 1px solid #F00;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0);
  display: block;
  position: absolute;
  top: 30%;
  right: 60px;
  z-index: 1;
}

.fg_Erase:hover,
img:hover {
  cursor: pointer;
}

img {
  position: absolute;
  top: 30%;
  right: 0;
}

.fg_GButton {
  position: absolute;
  top: 30%;
  right: 20px;
}

#bigT {
  z-index: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div style="position: relative;">
        <textarea cols="50" rows="5" id="bigT" name="bigT"></textarea>
        <button onclick="$('bigT').value = ''" class="fg_Erase">✘</button>
        <button type="button" name="info" id="info" class="fg_GButton">???</button>
        <img src="images/info.png" class="fg_alignImg"></button>
      </div>
    </td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search