I'm trying to figure out the best way to position text underneath these two images

I am currently working on enhancing my webpage by adding titles and text beneath the images of record covers.

Here is my CSS style:

img
{
  float: right; 
  padding: 10px; 
  float: right; 
  text-align: bottom; 
}       

#box1
{
  height:220px; 
  width: auto;
  padding-left:20px; 
  border: none; 
}
#box2
{
  height:230px; 
  width: auto;
  padding-left:20px; 
  border: none;
}

This is a snippet of my HTML code:

<a href ="http://nervoustwitch.bandcamp.com/album/this-modern-world-ep"><img    src="modworldsmall.jpg"></a>
<a href="http://nervoustwitch.bandcamp.com/album/bad-reputation-ep"><img src="badrepep.jpg"></a>

<H1> Releases</H1>

<p>Nervous Twitch released <B>Bad Reputation</B> their 1st EP at the beginning of 2013. Made up of tracks recorded the previous year, featuring previous band members and Erin on drums, the 'Bad Reputation' Ep used lo-fi production to good effect and featured 5 catchy, garage punk numbers most of which remain in the live set today</p>
<p>In June 2013 the band released <B>This Modern World</B>, with a fuller sound the band continued to experiment with their songwriting style whilst maintaining their pop sensibilities.</p>

</div>

If you require more information from the style sheet to assist with answering my question, please don't hesitate to let me know. Thank you.

Answer №1

Removed the float from the images and applied it to the #box1 div instead. Also included text-align:center; to ensure that the text below is centered.

Check out this example. I added borders around the images for visibility since there is no source provided.

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

Creating responsive text styles in CSS

I'm encountering an issue with a button that says Upgrade my account. My goal is to have different text for screens smaller than 990px, where it should display just Upgrade due to length constraints. Is there a CSS solution to achieve this without h ...

The issue with Bootstrap Vue is that it fails to render the CSS properly when utilizing cards

Recently, I delved into the world of Bootstrap Vue and wrote the code snippet below: <template> <div> <div> <b-card-group> <b-card border-variant="dark" header="Dark" align="center"> &l ...

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help

My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery ...

Creating a consistent visual appearance for disabled inputs in Bootstrap 4 to match regular inputs

In most cases, when an input is disabled in bootstrap 4, it appears greyed-out to show that it's inactive. I am looking into removing this grey background for a different look. ...

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

Modifying the design layout in index.html

I'm currently working on incorporating the feature for a User to switch themes in my PhoneJS application (possibly also using regular JavaScript). Here's what I have attempted: Index.html <!DOCTYPE html> <html> <head> ...

Creating a visually appealing webpage by utilizing Bootstrap and HTML for the layout

I am in the process of learning html and Bootstrap for CSS. Below is the code I currently have: <div class="container"> <div class="row text-center mb-4 mt-2"> <div class="col-md-12"> <div cla ...

Creating a JSFiddle with sprites using source and image files from Github with THREE.JS - a step-by-step guide

Greetings! I am currently working on creating a JSFiddle based on the official THREE.js HUD Sprites example. However, I am facing an issue where the sprite images do not seem to load or apply using the URLs specified in the original file:- //... URL' ...

The use of the picture element, with its ability to support various image formats and sizes, must always include

Recently, I came across a VueJS template that closely resembles HTML but has the following structure: <picture> <source type="image/avif" :scrset="avif" /> <source type="image/webp" :scrset="webp" ...

Issues with CSS and JS rendering have been observed on a website hosted through BlueHost

Just set up my website with Bluehost and running into issues with CSS and JS not rendering properly. Here's a glimpse of my public_html folder structure: https://i.sstatic.net/VnHFP.png The assets folder includes separate folders for CSS and JS fil ...

Loop through the elements of a class in JavaScript and choose all except for the one that was

Imagine having 5 div elements, each with a similar onclick-function that hides the other divs when clicked. HTML: <div id="1" class="divs" onclick="hide()"></div> <div id="2" class="divs" onclick="hide()"></div> <div id="3" cla ...

Efficiently locate the minimum and maximum coordinates of a connected component within a sizable image

I've encountered a challenge with an image sized 50000x50000, containing approximately 25000 connected components. By utilizing ndimage.label to label each component, I can then extract the non-zero points and determine the minimum and maximum x and y ...

Identifying selected shapes in CSS/Javascript by outlining them with small rectangles placed on each corner

Currently, I am working on a University Project that involves creating a selection function for drawn shapes such as rectangles, circles, lines, or triangles. The challenge lies in figuring out the visualization of the selection when a shape is clicked. T ...

Table with expansive width housed in a div container but the div container fails to

How can I make a parent div expand when the child table exceeds the page width? What is the most effective CSS approach to achieve this? ...

Switch between various div elements

Looking for a way to toggle between different divs? Here's the scenario: You have a sidebar with a set of buttons. Upon entering the page, you only want the div containing the button group to be visible. However, when a specific button (e.g. Info) is ...

CSS: Adjusting the position of tooltips to align with the triggering element (rest of code is fully functional)

Looking to create a custom tooltip without relying on plugins. The goal is to align the tooltip vertically to the right of the triggering element, in this case, an input field. The current setup (see Fiddle demo) achieves the desired layout and content fo ...

I find the fundamentals of calculating CSS width to be perplexing

All: I am curious about what happens when I set the width of the parent DIV to auto and the width of the child div to 100% - how does the browser determine the width of these DIVs? <div class="menuframe" style="position: fixed; width:auto; height:auto ...

What is the best way to horizontally align a fixed dialog element using the right property?

I have been experimenting with positioning HTML elements using the position: fixed; and right CSS properties, as outlined in the MDN Web Docs. However, I have noticed that this approach does not work as expected when trying to position a dialog element. Wh ...

What is the process for creating a luminous sweeping animation on an SVG image or logo?

Is it possible to apply light sweep effect only on the SVG logo? The light sweep effect is triggered when hovering over the logo The effect should be limited to the path inside the SVG image .preloader { position: fixed; display: flex; align-ite ...

Is the footer missing from view?

I tried to replicate my header code for the footer, but it doesn't seem to be displaying. I've double-checked everything and can't figure out why it's not working. Maybe there is a typo somewhere. Below are the two sets of code: Heade ...