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

Using AngularJS to handle click events and blur events

I am attempting to dynamically change the class based on user interaction in my code. The class should switch between "large" and "active" depending on whether the input field is filled or not. Please see the modified script below. <div class="snippe ...

javascripthtmlcssangularjs

Alignment problem in CSS, identical code on two separate servers

After transitioning from the design phase to development, I encountered a strange CSS issue on one small section of my client's website. Specifically, in the "Official NGK Canada Part Finder" section, the text is breaking onto new lines unexpectedly. ...

htmlcssalignment

Are you in search of an opening <html> tag for your project?

When I use Initializer to quickly generate HTML5 + Boostrap boilerplates, I noticed that the HTML document it creates does not include an opening <html> tag. This got me curious. Here is the beginning portion of the code generated by Initializr: &l ...

htmltwitter-bootstrapinitializr

Using jQuery to dynamically render unordered lists from JSON data

Struggling to create a dynamic unordered list with multiple nested levels? Finding it difficult to render the necessary markup for future functionality? Take a look at the HTML structure I've created on this jsfiddle link: <ul class="nav nav-sideb ...

javascriptjqueryhtmlarraysjson

managing the HTML class names and IDs for various functions such as styling, jQuery interactions, and Selenium automation

While there is an abundance of articles on writing clean HTML/CSS, one aspect that seems to be lacking advice is how to organize class names and IDs for different purposes such as design, jQuery, and Selenium testing. The challenge lies in deciphering the ...

javascriptjqueryhtmlcssselenium

downsides of scrolling text functionality

Sure, it may seem evil. But what makes it so? Is it because all browsers support it? Which aspx asp.net controls are restricted in this tag? What are the reasons for avoiding this tag? ...

htmlmarquee

Retrieving the value of the option that has been selected from a dropdown

I have successfully implemented a drop-down menu with the following code: // Creating a select element for priority within a form in the bottom row div const formPriority = document.createElement("select"); formPriority.setAttribute("name","project"); form ...

javascripthtml

Do arrays permanently retain the strings stored within them?

As an 11-year-old who has been learning Javascript for the past month and a half, I am currently working on creating a login/register system. Right now, my focus is on the register part. I have a question: when adding a string/number/boolean to an array, d ...

javascripthtmljquerycssarrays

Incorrect display of French characters in emails

Issues arise when sending emails with French characters, as they are not displaying correctly in the mail body. I made sure to include the following code in my HTML page: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Despit ...

htmlemailasp-classic

Set Bootstrap column size to match a particular column

I am currently using BootStrap 4 and I am attempting to make a column's height equal to another column. Below is the code snippet I am working with: <div class="container" style="overflow:hidden"> <div class="row" style="overflow:hidden" ...

htmlcssbootstrap-4

Eradicate white space in a JavaScript code

Calling all JS programmers! Here's a challenge for you, check out this demo: https://codepen.io/gschier/pen/jkivt I'm looking to tweak 'The pen is simple.' to be 'The pen issimple.' by removing the extra space after 'is& ...

javascripthtmlcss

What is the reason for receiving 'undefined' from await page.Evaluate() function call?

My attempt at creating a deploybot using nodejs is encountering an issue when trying to access the environments page, as it's unable to locate the button. The code snippet in question is as follows: //wait until element with unique id contain ...

htmlnode.js

Exploring HTML5 using QXmlQuery

Looking to execute XQueries on a batch of HTML5 documents using QT (currently at 5.8...) HTML/HTML5 documents, unlike XHTML/XHTML5, are not well-formed XML files. HTML introduces elements that XML parsers cannot handle off the bat (such as special characte ...

htmlxmlqtxpathqxmlquery

Incorporate h:outputText into your JavaScript code segment

After populating some information into a h:outputText, I am now looking to trigger a JavaScript function upon clicking a button that will retrieve the text from the outputText. The structure of the code is as follows: <p:tabView id="tabView"> & ...

javascripthtmlajaxjsf

Customizing CSS for Internet Explorer browsers

I am looking to target specific CSS styles for Internet Explorer only, without affecting other browsers. Initially, I tried using conditional comments: <!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]--> <!--[if IE 7 ]><html cl ...

htmlcssinternet-explorerconditional-comments

Customize CSS styles based on Angular material stepper orientation

Is it possible to change the CSS style of an angular material stepper based on its orientation? For instance, can we set a red background when the stepper is displayed vertically and a blue background when horizontal? ...

cssangularangular-material

Can a div with float: left; be centered?

Currently, I am attempting to create a dock (similar to the iOS dock) for my website. Below is the full code that I have implemented: function addPrevClass(e) { var target = e.target; if (target.getAttribute('src')) { // check if it is img ...

javascriptjqueryhtmlcss

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

javascripthtmldom

I am looking to expand my CSS/HTML menu with an additional sub-sub menu. What is the correct way to achieve this?

This is my current CSS code that I am working on. I am trying to create a multi-level menu in Blogger with submenus, sub-submenus, and sub-sub-submenus without disrupting the existing formatting. .top-nav { background-color: #f9f9f9; background: t ...

htmlcss

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

javascriptjqueryhtmlcss