Pictures glide within containers

Hey, I'm having an issue with my images. They're not floating like they should be, even though they are centered in the div. I really want them to float and be centered. Here's the code snippet I've been working with.

HTML

<div class="middle-align">
    <div id="gallery-left">
        <div class="gallery-left-middle">
            <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
            <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
            <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
            <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
        </div>
    </div>
</div>

CSS

.gallery-left-middle {text-align:center;}
#gallery-left img{float:none;display:inline-block;width:180px;height:180px;}

I tried following a solution on Stack Overflow, but unfortunately, it's still not working for me.

Any suggestions on why my images aren't floating properly, even though they're centered? I'd appreciate any help!

htmlcss

Answer №1

The reason for this behavior is that the p element is a block-level element, which means it will automatically fill the width of its parent div. Additionally, because the img elements have a style of text-align:center, they will be centered within the p element. If you prefer to have the images floated instead, you can try setting display:inline-block on the p elements rather than the img elements.

.gallery-left-middle {text-align:center;}
.gallery-photo {display: inline-block;} 
img{width:180px;height:180px;}

See it in action here!

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

"Positioned at the top of the page is the alert box, with the

I'm looking to add an alert at the top of my webpage containing a form for visitors to enter their phone number. Currently, I have a "alert alert-info" div with the form inside it placed at the top of my body tag, which works perfectly. However, when ...

javascriptjqueryhtmlcsstwitter-bootstrap

The positioning of the Zorro table column remains flexible despite the presence of nzLeft

I am currently developing a project using Angular. Within one of my components, I have a table that displays some data. This table is generated by the ng-zorro table module. However, I've encountered an issue where setting a table column or header wi ...

htmlcssangularng-zorro-antd

Creating a Seamless Bond Between JavaScript and HTML

I've been struggling to find a helpful and straightforward solution to a simple problem. On my web page, I have five image placeholders that should be filled with one of nine random pictures. To achieve this, I wrote a JavaScript code that generates r ...

javascripthtml

placing a command button to the right side

Currently, I have successfully implemented a graphical solution using jsf2.2 primefaces 6.0 to allow users to view, download, and print pictures through the galleria component of primefaces. However, I am facing an issue with positioning the print command ...

cssprimefacesjsf-2.2

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

pythoncssseleniumxpath

"Incorporate countless Bootstrap 4 carousels into one webpage for an enhanced user

I'm experiencing difficulties with the new Bootstrap 4. Can anyone provide guidance on how to incorporate multiple Bootstrap carousels into a single page? I've researched several websites, but most only offer solutions for Bootstrap 3. Your assi ...

javascripthtmlcssbootstrap-4

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use document.getElementsByClassName() won't work because Node doesn't have document. The goal is to change the color of a specific div when the ...

javascriptcssnode.jselectron

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

Ways to add extra dots to your listing style

Is there a CSS property or list style that can display an expanding list? For example: Order now for a discount! <ol style="list-style: none"> <li>* Available only for the first 12 months</li> <li>** Only for new customers ...

htmlcss

Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...

javascripthtmlcssasciinema

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

I'm having trouble playing the WAV file located at this link. The file plays fine in VLC and the details show that it is a Mono IMA WAV APDCM Audio (ms) file sampled at 24000Hz with 16 bits per sample. However, when I try to play the file by embeddin ...

javascripthtmlaudiowavaudiobuffer

Angular Fragmentary Perspective

I have a lengthy form in angular that I am currently working on. I'm wondering if there is a way to divide it into multiple views and then link each of them back to the main view. <div class="container"> <div class="row" id="part1"> ...

cssangularhtml

Some elements are not responding to margin-top properly

I am facing a problem where 2 elements are not responding to the specified margins of margin: 260px 0 0 0; or margin-top: 260px;. Despite inspecting the elements in IE's dev tools and confirming that the margin is set, the elements appear at the top o ...

htmlcsslayout

Learning how to effectively incorporate two matSuffix mat-icons into an input field

I'm currently experiencing an issue where I need to add a cancel icon in the same line as the input field. The cancel icon should only be visible after some input has been entered. image description here Here's the code I've been working on ...

javascripthtmlcss.netangular

Error message: Injector Error: R3InjectorError(Standalone[_AppComponent])[_WebService -> _WebService -> _WebService] occurred

Being a student, I must apologize in advance for any mistakes in terminology or gaps in my understanding. I am currently developing an Angular front-end to communicate with my backend API. However, I keep encountering the following error in the web page c ...

htmlangulartypescriptfrontendbackend

How can I eliminate the border from the last child in a row within a responsive framework?

Put simply, I am trying to target not only the last child in a parent div, but also the last item in a row that adjusts based on screen size. I have a row of 4 elements (divs) with borders on all but the last one using :last-child. However, when the screen ...

csstwitter-bootstrap-3

Guide to binding input type= 'email' in Knockout.js

My project utilizes KnockoutJS with MVC. I am seeking assistance on determining whether an emailId is valid or invalid. Based on this validation, I need to dynamically enable/disable a button and set an error title for the corresponding textbox. Below is ...

javascriptjqueryhtmlknockout.jsknockout-mvc

How can one remove surrounding paragraph texts using BeautifulSoup in Python?

I'm a beginner in Python, working on a web crawler to extract text from articles online. I'm facing an issue with the get_text(url) function, as it's returning extra unnecessary text along with the main article content. I find this extra te ...

pythonhtmlbeautifulsoupweb-crawler

The I am facing an issue with Material-ui Grid where the width of the Grid item is too large and extending beyond the boundaries

I'm in the process of setting up a basic layout for a single-page application using Material-ui and React. My plan is to have a sidebar on the left-hand side and a main area on the right-hand side to display information. However, I am facing two issue ...

cssreact-nativeflexboxmaterial-ui