Arranging arrows in a horizontal alignment next to a column of images

Here is the div structure with two arrows positioned on top and bottom.

I am trying to center the two arrows slightly towards the column of images. How can I achieve this?

Link to a JSFiddle for reference: Fiddle

I attempted the following CSS code, but it didn't work:

.arrows{
    border: 3px solid lime;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: inline-block;
    height: auto;
}

HTML structure:

<div id="Wrapper">
  <div class="row">
      <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
    <div id="itemWrapper">
      <div id="items">
          <div class="content">
              <input type="image" src="http://img42.com/p1puE+" class = "thumb" />
          </div>
          <div class="content">
              <input type="image" src="http://img42.com/p1puE+" class = "thumb" />
          </div>
          <div class="content">
              <input type="image" src="http://img42.com/p1puE+" class = "thumb" />
          </div>
      </div>
    </div>
        <img src="http://img42.com/h1DoP+" class="arrows" height="128" width="128" />
  </div>            
</div>

htmlcss

Answer №1

Looks like you were heading in the right direction with using display-inline and text-align:center

All you needed to do was ensure that the align property was set on the parent element, allowing for any inline or display-inline HTML elements within to be centered.

#Wrapper{
    height: 100%;
    border: 1px solid #f60;
    text-align:center;
    width:300px;
}

.arrows{
    border: 3px solid lime;
    display:inline-block;
    background:red;
    position:relative;
    z-index:10;
}

If desired, you could also utilize negative margins on #itemWrapper to adjust the positioning of the arrows up and down.

#itemWrapper{
    height: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid brown;
    margin-top:-15px;
    margin-bottom:-15px;
}

Refer to this JSFIDDLE link for a visual example

Answer №2

Aligning the Arrows at Center

To center the arrows, wrap them in div elements. Set the width of these div containers to match the images' width. Then, apply text-align: center in your CSS for the div.

<div class="arrow-wrapper">
    <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>

CSS:

.arrow-wrapper{
    width: 200px;
    text-align: center;
}

Adjusting Proximity

To move the arrows closer to the image, assign individual classes to each arrow:

<img src="http://img42.com/p2OH4+" class="arrows top" height="128" width="128" />
<img src="http://img42.com/p2OH4+" class="arrows bottom" height="128" width="128" />

Then, add CSS rules:

.top{
    position: relative;
    top: 20px;
}
.bottom{
    position: relative;
    bottom: 20px;
}

Answer №3

Expanding on @Slavenco's response and to fully wrap things up, my suggestion would be to incorporate an "arrow-top" class and an "arrow-bottom" class. Adjust the margin accordingly to achieve the desired overlapping effect. It may be necessary to modify the z-index to ensure that the arrows are displayed on top.

I formatted each image like this:

<div class="arrow arrow-top">
  <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>

(Note: The bottom arrow should use the "arrow-bottom" class instead of "arrow-top") And here is the CSS code:

.arrow { width: 100%; text-align:center; }
.arrow-top{ margin-bottom: -10px; }
.arrow-bottom{ margin-top: -10px; }

You can tweak the margins until you achieve the exact overlap you desire.

https://jsfiddle.net/b899145q/12/

Answer №4

To achieve the desired overlap, consider using position: relative; for elements with class "row" and position: absolute; for elements with class "arrows". This will take them out of the document flow and allow for overlapping. If you simply want to center them without overlap, try moving text-align: center; to the parent element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS - splitting the element in its current position (without going back to the start of the line)

In my e-commerce platform, I rely on pre-made solutions to help with changing the appearance without altering templates to avoid complications during updates. I am curious if there is a way to create a table effect without using standard CSS table styles ...

htmlcsslineline-breaks

What is the best way to integrate a vh property instead of px for a scrolling navigation using jQuery?

I want to achieve a navigation bar that fades in after scrolling 100% of the viewport height, but all examples I find use a pixel value instead of viewport height. Is there a way to convert window height into jQuery to make this work? Thank you in advance ...

jquerycssviewport-units

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...

htmlcss

The function putImageData does not have the capability to render images on the canvas

After breaking down the tileset The tiles still refuse to appear on the <canvas>, although I can see that they are stored in the tileData[] array because it outputs ImageData in the console.log(tileData[1]). $(document).ready(function () { var til ...

javascriptjqueryhtmlcanvas

How to create horizontal spacing between divs using Bootstrap 3

I am struggling to create a small horizontal space between the "Away Team" and "Baseball Field" divs in my code. I have tried adjusting padding, margins, and even adding decimal column offsets without any success. The desired spacing effect can be seen in ...

htmlcsstwitter-bootstraptwitter-bootstrap-3grid

The border of the table appears uneven and crooked when I open it in Outlook

Creating a simple email template in HTML has been a breeze for me, with the design looking fine in Firefox and IE. However, I encountered an issue in Outlook 2016 where the left border line appears crooked. To resolve this problem, I included border-colla ...

htmlcssoutlook

Ensure that the child div completely fills the entire width of its parent container,

My table contains another table within each row. I have implemented scroll overflow for the mobile view, but this causes the rows to not fill the available space and lose their background when scrolling. I have experimented with using width: fit-content a ...

htmlcsshtml-tableoverflowwidth

How should one go about properly sizing and formatting image icons?

Currently, I'm exploring the most efficient ways to optimize image loading speed on a webpage. Specifically, I am looking for advice on the best method for resizing an image from 1600x900 to 890x500. Method 1 Utilize the following code: <img src= ...

htmlcssimage

The server attempted to transfer the resource as an image, but it was interpreted with the MIME type text/html

Since updating to the new version of go appengine, I've been having trouble loading images into a page. It used to be straightforward before, but now when I compile the code and launch the app in the browser, I get this message: Resource interprete ...

htmlgoogle-app-enginego

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

How can I write text into an SVG shape created with d3.js and limit it to stay inside the shape similar to this example http://bl.ocks.org/mbostock/4063582? I attempted to use a clipPath following the example provided. However, when inspecting with firebu ...

javascripthtmld3.jssvg

What could be causing this compatibility issue between IE and Chrome? It's strange that the Table is displaying correctly only in Chrome

Recently, I encountered a challenge with my code in Chrome and realized that it also needs to work in Internet Explorer. Can someone assist me in making it fully functional in IE? I suspect that there might be specific code adjustments needed for IE as th ...

javascriptcsshtml

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

javascripthtmltypescriptqueryselector

Identify the name in the list by highlighting it when its content matches the text in a specific div id

I have an unordered list structured like this: <ul> <li id="projectrow_364"> <span>Forest</span> </li> <li id="projectrow_365"> <span>Life</span> ...

jquerycss

Unexpected activation of Internet Explorer media queries causing display issues

Check out my CSS code below: @media all and (max-width: 500px){ .calendar_head{ height: 120px; line-height: 60px; } } .calendar_head{ width: 100%; font-weight: 700; color: #6a7783; text-align: center; line-heigh ...

htmlcssinternet-explorermedia-queries

"TailwindCSS opts for the inclusion of prefexied utilities instead of relying

Trying to set the height of the div to h-2, with a class that includes height animation on medium devices. The issue is that even though h-2 should be used on mobile, tailwindcss still uses h-20 instead. Any thoughts on why this may be happening? Here i ...

cssreactjsnext.jstailwind-css

Is there a way to position the textfield so that it is next to my button?

I'm currently customizing a newsletter form using a WordPress plugin and CSS. I'm also trying to apply the same style to a search form located above the newsletter signup section. Here is the HTML output and corresponding CSS: #sidebar { fo ...

phphtmlcsswordpress-theming

Unable to trigger onClick event

The button I have with the id "jump-button" is not functioning at all. When clicked, nothing happens. I have added an alert(); to the onclick attribute to test if the button is working. However, the other two buttons (next and prev) are working perfectly ...

javascripthtmlonclick

What is an alternative method for incorporating an external webpage into a website without utilizing an iframe

I've been trying to embed the Amazon website into a webpage, similar to what's been done here: Initially, I attempted to use an iframe, but Amazon blocks it from being displayed as a security precaution: <iframe src="http://www.amazon.com/" ...

htmliframeembed

I am unsure of the process for implementing an OnClick event to modify the colors of a square

Seeking guidance from the more experienced individuals here as I am just starting out. Any help would be greatly appreciated! This might seem simple to many of you, but for me it's quite challenging. This is how my HTML code looks: <html> < ...

javascriptjqueryhtmlcss