Attempting to position a centrally aligned div block containing images towards the left side

I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered:

See below:

Here is the HTML and CSS code I am using:

<div class="widget-content" style="text-align:center;">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
</div>

CSS:

.widget-content {
  padding: 12px 15px;
  border-bottom: 1px solid #cdcdcd;
}

.medium_thumb_rounded {

  border: 1px solid #B6BCBF;
  /*float: left;*/
  height: 80px;
  width: 80px;
  margin-right: 1px;
  margin-bottom: 5px;
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
       border-radius: 3px;  
}

Can anyone spot what I might be doing wrong in my code?

htmlcss

Answer №1

The issue lies with the following line:

<div class="widget-content" style="text-align:center;">

To fix this, you can delete the text alignment for centering.

Answer №2

Replace the CSS property text-align:center; with text-align:left;

Answer №3

In order to maintain the center alignment of the content within the div, consider adding the following CSS rule to .widget-content:

margin:auto;

This code will ensure that the div remains centered on the page, while other solutions like changing text-align:center to text-align:left can be used to adjust the alignment of the content inside the div.

Answer №4

If you want to achieve the desired outcome, it is important to include a max-width property in your DIV.

http://jsfiddle.net/qpzrm/

style="text-align:center;"

To solve this issue, make sure to apply the following to your DIV:

margin:0 auto;
max-width:###px;

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

Utilizing jQuery to target elements that are dynamically generated upon successful AJAX response

When handling dynamically created elements on ajax success, I encountered an issue. I have multiple checkboxes within a table and when the table content is replaced on ajax success, I am unable to select any new checkbox. While it is possible to trigger cl ...

javascriptjqueryhtmlajax

Symbol adjacent to button with multiple lines

My objective is to design a button with multi-line text and an icon positioned centrally next to it for both lines. Refer to the screenshot below for clarification: https://i.sstatic.net/ODPI2.png Despite my efforts, I am encountering difficulty in cente ...

htmlcss

Eliminate the initial item in each list item

I am trying to delete the first element inside each li element, but my current code only removes the a element from the first li and not all li elements. For example: This is what I have: <ul class="myclass"> <li class="product-category produc ...

htmljquery

How to automatically open JQuery Accordion panels when the page loads

My Accordion loads with the 1st panel open upon page load, but I am looking for a way to have the entire Accordion closed by default. Any help or suggestions on how to achieve this would be highly appreciated. Thank you for your assistance. FIDDLE http:// ...

javascriptjqueryhtmlcss

How to stop Bootstrap collapsible items from "shifting"

I recently integrated a Bootstrap collapse plugin to manage my list of common inquiries: https://jsfiddle.net/2d8ytuq0/ <ul class="faq__questions"> <li> <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Auto-selecting the first item in a CSS menu when the switcher is tapped on mobile devices

Struggling with a responsive CSS menu on my website, . The switcher on mobile seems to automatically click the first item in the menu (Home) as I open it, redirecting me instantly. When setting the link to "#" everything is fine, but then I lose the home l ...

javascriptcssresponsive-design

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

javascriptphphtmlajaxdynamicform

How can you make a dynamic 360 image that responds to mouse movements using three.js?

Is it possible to achieve a three.js effect similar to the one shown here? We have come across solutions that involve drag&drop for camera angle control, but we are interested in having the mouse position dictate where the camera points. For instance, ...

javascriptjqueryhtmlthree.js

Ways to access the preceding DIV element closest to the current one

Hovering over the text My will cause the image myicon.png to fade out and back in: <div class="mmItemStyleChild"> <img src="theImages/myicon.png" class="mIcon vertAlign mmm1" id="mMW1" /> <img src="theImages/emptyImg.png" class="mSpacer ...

jqueryhtmlcss

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...

htmlcssasynchronousdeferred-loading

Modify the color of every element by applying a CSS class

I attempted to change the color of all elements in a certain class, but encountered an error: Unable to convert undefined or null to object This is the code I used: <div class="kolorek" onclick="changeColor('34495e');" style="background-c ...

javascripthtmlcss

What is the best way to retrieve data from a database and display it in a select dropdown list

I'm working on creating a Bingo game and I want to include a dropdown list that displays my previous records. How can I retrieve data from a database to populate this select dropdown list? Below is the relevant code snippet in PHP: <html> < ...

javascriptphphtmljqueryajax

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

Understanding AngularJS and how to effectively pass parameters is essential for developers looking

Can anyone help me figure out how to properly pass the html element through my function while using AngularJS? It seems like this method works without AngularJS, but I'm having trouble with the "this" keyword getting confused. Does anyone know how I c ...

javascripthtmlangularjs

Generate rows based on the quantity of items in Django templates

My current goal is: To create a <div class="row-fluid center"> and only display a maximum of 3 elements from list.dias.all. However, I am struggling to come up with the correct code. <div class="row-fluid center" id="{{list.dias.all.count ...

jqueryhtmlcssdjangodjango-templates

A code snippet designed to ensure uniform height for all floating div elements

Hello, I am facing an issue with resizing 20 left-floated divs of varying heights on my website. Previously, when my website was designed using pixels, a script worked perfectly for resizing them. However, after switching to a percentage-based design (% d ...

javascriptjquerycss

Vanilla JavaScript error: Unable to access property

I am working on implementing a header with a logo and navigation that includes a menu toggle link for smaller viewports. My goal is to achieve this using Vanilla JS instead of jQuery. However, when I click on the menu toggle link, I encounter the followin ...

javascripthtmltypescript

Displaying a MySQL blob image in an HTML file with Vue.js: A step-by-step guide

Here is a Vue file that I have: export default { data(){ return{ info: { name: '', image: '', }, errors: [] } }, created: function(){ thi ...

javascripthtmlmysqlvue.jsblob

Tips for assigning an AngularJS value to jQuery

Displaying a value in a view using {{ myvalue }}. Assigning the value from the controller as $scope.myvalue = "123"; Attempting to send this value myvalue to an ajax call. Need to assign angularjs value to jquery value. How can I accomplish assigning t ...

javascriptphpjqueryhtmlangularjs

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

phpjqueryhtmlmysqlajax