Could you please suggest a method to position a button that is not entirely on the right side?

As I work on building my website, I am faced with the challenge of aligning a button directly under an image. I have utilized HTML tags and assigned a class to it for CSS styling purposes. However, when it comes to setting the alignment using the 'text-align' property in CSS, I find myself limited to just 'center', 'right', or 'left'. I attempted to specify a value in pixels (e.g., 30px), but unfortunately that did not yield the desired outcome. Below is an image showcasing a portion of the website layout.

CSS:

.imgButton{
     text-align:right;
 }

HTML:

<img id="course-image2" src ="https://www.dhresource.com/0x0/f2/albu/g8/M00/2D/C9/rBVaVFz-C7KAY4jwAAEi8hE3J14252.jpg/men-suit-men-tuxedo-custom-made-wedding-suits.jpg" width="260" height="500" alt="guy2" class="center"/>
  
  <div class="imgButton">
      <button class="check">Gentleman</button>
  </div>

Image (showcasing the 'Gentleman' button placed at the far right corner):

https://i.sstatic.net/jJx3q.jpg

htmlcss

Answer №1

To create this layout, wrap both the image and button in a container element and utilize flexbox to organize them in a column.

.imgContainer {
  display: flex;
  flex-direction: column;
}
  
  <div class="imgContainer">
      <img id="course-image2" src ="https://www.dhresource.com/0x0/f2/albu/g8/M00/2D/C9/rBVaVFz-C7KAY4jwAAEi8hE3J14252.jpg/men-suit-men-tuxedo-custom-made-wedding-suits.jpg" width="260" height="500" alt="guy2" class="center"/>
      <div class="imgButton">
        <button class="check">Gentleman</button>
      </div>
  </div>

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

Strategies for maintaining login status in Selenium

When utilizing selenium and bs4 to parse a webpage, I encounter an issue where the webpage requires scanning a QR code and entering a verification code to log in. To address this, I have implemented the use of WebDriverWait to pause the script until the u ...

pythonhtmlauthenticationselenium-webdriverwebdriver

What could be causing my divs to not properly handle overflow with the overflow-y scroll property?

I'm struggling with making my sidebar and content area responsive in terms of height. I want them to adjust to fill the screen appropriately, rather than having a fixed height. The issue arises when I have varying content heights, such as when a page ...

htmlcssbootstrap-5

Set a consistent pixel measurement for all images

I am working on a project where I have an image of a card that needs to be repeated 30 times. Each time the card is repeated, I want it to overlap with the previous card in a specific position, resembling a deck of cards. The issue I am facing is that whe ...

htmlcssvue.js

Having trouble implementing font css file in Reactjs

When working with Reactjs (Nextjs), every time I try to incorporate "css" into my project, I encounter the following error on my screen: Module not found: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' How can I solve this issue? ...

javascripthtmlcssreactjsnext.js

What is the best way to adjust the transparency of a <div>'s background without impacting its contents?

HTML <div class="row Home"> <div class="col right" style="background-image: url('./Images/car-2797169_1280.jpg')" > <div class="elementsOverlay d-flex ju ...

cssbootstrap-5

Images within links appear with blue lines underneath them

Currently, I am in the process of adding links to a footer by using <img> tags with SVG images. However, I am encountering an issue where there are small blue lines under the icons. After searching online, it seems that you need to add this CSS code: ...

htmlcss

Is the spacing of the indicators on the bootstrap carousel uneven?

I'm stuck here and trying to figure out why the distance between the bootstrap carousel indicators is not equal. https://i.sstatic.net/n2MQm.jpg If you look at the image, you can see the uneven spacing between the 1st and 2nd indicators. #carou ...

csstwitter-bootstrap

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

javascriptjquerycssjquery-collision

How to export HTML table information to Excel using JQuery and display a Save As dialog box

This script has been an absolute lifesaver for my web application. Huge thanks to sampopes for providing the solution on this specific thread. function exportToExcel() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6& ...

javascriptjqueryhtmlmysqlexcel

Aligning the anchor element to the right inside a div is not functioning as expected

I've been working on creating a sidebar with an 'X' button in the top right corner. Initially, I attempted to use float: right to position it on the right side, but unfortunately, this didn't produce the desired result. The anchor tag ...

htmlcss

Ways to notify Google that this content is integrated into a different article

Following each article on my website, there are random previews for other articles. However, these previews are quite large, featuring a headline, subheadline, and six rows of text. This has caused confusion as Google sometimes mistakes them for being part ...

htmlseoweb-crawlergoogle-crawlers

Verify the accurate sequence for arranging the items in the drag and drop list

I am currently developing a Language learning platform that includes several web applications. I am still new to javascript and struggling to find a solution for one of my apps. This specific app involves draggable list items that need to be arranged in t ...

javascriptjqueryhtmldrag-and-dropjquery-ui-draggable

The jQuery UI dialog stubbornly refuses to close when tapped, yet opens without hesitation

I'm struggling to understand why my dialog boxes are not closing when I tap outside of them. I've tried using different selectors such as document, window, .ikon_picmap, but nothing seems to be working. What am I missing here? Check out the code ...

jquerycssjquery-uipositionjquery-ui-dialog

Is it possible to rearrange column order in Bootstrap 4x according to different viewport sizes?

One of the great things about Bootstrap is its ability to rearrange columns regardless of the HTML structure. However, I am looking to have a different order of elements when the viewport size is smaller (e.g., Mobile). The current HTML structure looks li ...

htmlcssbootstrap-4

Swap out video files using jQuery

I have a basic video player setup <video id="video" src="http://xyx.com/zzz.m3u8" controls="controls" width="480" height="280"></video> I would like the ability to switch between different video streams by clicking on a link, for example &l ...

jqueryhtmlvideohyperlinkstream

The function send_filer either returns None or finishes execution without encountering a return statement

I am currently developing an application where users can download a plot.png and a file.csv, but the send_files function isn't working as expected. Below is my Python code: app = Flask(__name__) app.USE_X_SENDFILE = True @app.route('/', met ...

pythonhtmlflaskserversendfile

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

javascriptjqueryhtmlhtml5-videodynamic-loading

Unable to locate the tag using .find() function following the use of .attr() method

I am currently utilizing jQuery in conjunction with node-horseman to interact with a specific page. My approach involves referencing the page's data-id attribute, which I then pass to my application to search for the li element containing this attribu ...

javascriptjqueryhtml

Swap the existing div with a fresh div using jQuery or JavaScript

Seeking a straightforward method to swap out a div with a different div, ensuring cross-browser compatibility with JavaScript or jQuery. Below is a code snippet to demonstrate. The goal is to replace "myDiv-B" with a new div: <div id="myDiv-C">{% in ...

javascriptjqueryhtml

Is your data coming in as NaN?

I am currently developing a basic webpage that has the capability to calculate your stake and determine your return, reminiscent of a traditional betting shop. As of now, I have successfully hard coded the odds into my page. However, while testing my code ...

javascriptjqueryhtmljson