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

Html – How do I move these arrows down to be centered in the column?

I’m trying to change the size and move the up and down arrows to be centered in its respected column.
Here is a screenshot fo the problem.
Screenshot of website

Here’s the HTML code of one of the table columns(All 5 columns have essentially the same code):

`<td>
  <div class = "row">
    <div class = "column1">
         <img id="slideShirt" class = "IMGsize" src="https://..." alt="Hawaiian Shirt 1">
            <h3 class = "shirt" id ="shirtName">
               <center>Shirt 1</center> 
            </h3> 
     </div>

     <div class = "column2">
        <img onclick="nextShirt()" class = "arrow" src="https://..." alt="Up arrow">
        <br>
        <img onclick="previousShirt()" class = "arrow" src="https://..." alt="down arrow">
     </div>  
  </div> 
</td>`

The image of the shirt is in "column 1" and the up and down arrows are in "column 2"

Here is the css code that goes with the columns and images of the arrows:

.column1 {
    
    float: left;
    width: 60%;
    height:85%;
}

.column2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;  
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

img.arrow {
  height: 115%;
  width: 30%;
}

For some reason I can’t change the size or postion of the arrows using the "arrow" class. The arrows are in column2 but everything in the column 2 looks like it would make the image centered but it’s not.
Any and all helps/ideas are welcomed. Please and thank you.

Tags:

2

Answers


  1. 0

    use

    .column1 .IMGsize {
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    Login or Signup to reply.
  2. 0

    EDIT: Please also take a look at Grid Layout, which is more suited for this. However, if you want to continue using a table, the example I have added to this answer will help you.

    It seems like you’re not fully leveraging the table layout. Here’s a way this can be done with a minimal amount of CSS:

    .row {
  display: flex;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
}
    <table>
  <tr>
    <td>
      <div class="row">
        <div class="col">
          <img id="slideShirt" class="IMGsize" src="https://picsum.photos/200/300" alt="Hawaiian Shirt 1">
        </div>
        <div class="col">
          <img onclick="nextShirt()" class="arrow" src="https://..." alt="Up arrow">
          <br>
          <img onclick="previousShirt()" class="arrow" src="https://..." alt="down arrow">
        </div>
      </div>
      <h3 class="shirt" id="shirtName">
        <center>Shirt 1</center>
      </h3>
    </td>
    <td>
      <div class="row">
        <div class="col">
          <img id="slideShirt" class="IMGsize" src="https://picsum.photos/200/300" alt="Hawaiian Shirt 1">
        </div>
        <div class="col">
          <img onclick="nextShirt()" class="arrow" src="https://..." alt="Up arrow">
          <br>
          <img onclick="previousShirt()" class="arrow" src="https://..." alt="down arrow">
        </div>
      </div>
      <h3 class="shirt" id="shirtName">
        <center>Shirt 1</center>
      </h3>
    </td>
  </tr>
</table>

    You can see the arrows are aligned vertically to the center of the image.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search