Center align with padding on all sides

I'm trying to align the elements so that they all line up perfectly without any extra spacing. I've used justify-content: center to center the elements, but they end up looking like this.

enter image description here

However, I want everything to be evenly spaced while still remaining in the center without any additional spaces, similar to this.

enter image description here

One important thing is that when the screen width increases, the elements should not stack in a column but rather remain in a row. Currently, I intentionally reduced the width to prevent them from fitting properly.

.flex {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  width: 200px;
}
.item {
  position: relative;
  padding-left: 28px;
  display: flex;
}
.item:not(:last-child) {
  margin-right: 16px;
}
.item svg {
  position: absolute;
  top: 5px;
  left: 0;
}
.item span {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  max-width: 200px;
}
.item img {
  width: 30px;
  margin-left: 7px;
  display: inline-block;
}
<div class="flex">
   <div class="item">
     <span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
     <span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
   </div>
    <div class="item">
     <span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
   </div>
 </div>
htmlcss

Answer №1

Introduce a new wrapper element (

<div class="wrapper">
) while maintaining the existing structure. The key difference now is that the wrapper is positioned at the center.

Review the code snippet provided below.

.flex {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  width: 200px;
  border: 1px solid red;
}

.item {
  position: relative;
  padding-left: 28px;
  display: flex;
}

.item:not(:last-child) {
  margin-right: 16px;
}

.item svg {
  position: absolute;
  top: 5px;
  left: 0;
}

.item span {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  max-width: 200px;
}

.item img {
  width: 30px;
  margin-left: 7px;
  display: inline-block;
}
<div class="flex">
  <div class="wrapper">
    <div class="item">
      <span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
      <span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
      <span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
  </div>
</div>

EDIT 1

.flex {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  border: 1px solid red;
}

.item {
  padding-left: 28px;
  display: inline-block;
}

.item:not(:last-child) {
  margin-right: 16px;
}

.item svg {
  position: absolute;
  top: 5px;
  left: 0;
}

.item span {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  max-width: 200px;
}

.item img {
  width: 30px;
  margin-left: 7px;
}
<div class="flex">
  <div class="wrapper">
    <div class="item">
      <span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
      <span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
      <span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
  </div>
</div>

EDIT 2

.flex {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  border: 1px solid red;
}

.item {
  padding-left: 28px;
  display: inline-block;
}

.item:not(:last-child) {
  margin-right: 16px;
}

.item svg {
  position: absolute;
  top: 5px;
  left: 0;
}

.item span {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  max-width: 200px;
}

.item img {
  width: 30px;
  margin-left: 7px;
}

@media screen and (max-width: 576px) {
  .item {
    display: flex;
  }
}
<div class="flex">
  <div class="wrapper">
    <div class="item">
      <span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
      <span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
      <span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
  </div>
</div>

Answer №2

This issue arises from inserting the img element after the content of the span, rather than within the span itself.

.flex {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  width: 200px;
}
.item {
  position: relative;
  display: flex;
}
.item svg {
  position: absolute;
  top: 5px;
  left: 0;
}
.item span {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  min-width: 100px;
  max-width: 200px;
}
.item img {
  width: 30px;
  display: inline-block;
}
<div class="flex">
   <div class="item">
     <span>Australia</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
    </div>
    <div class="item">
     <span>Italy</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
   </div>
    <div class="item">
     <span>Germany</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
   </div>
 </div>

Answer №3

Is this the type of solution you were looking for? I hope it provides some assistance.

If you need further guidance on flexbox layout, check out this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flex {
  margin-bottom: 24px;
  flex-wrap: wrap;
  width: 200px;
}
.item {
  position: relative;
  padding-left: 28px;
}
.item .wrapper{
  font-size: 16px;
  line-height: 1.5;
  max-width: 200px;
  display: flex;
  align-items: center;
  text-align: left;
}
.item img {
  width: 30px;
  margin-left: 7px;
  display: inline-block;
}
<div class="flex">
   <div class="item">
     <span class="wrapper"><span class='country'>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
    </div>
    <div class="item">
     <span class="wrapper"><span class='country'>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
   </div>
    <div class="item">
     <span class="wrapper"><span class='country'>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
   </div>
 </div>

Answer №4

.flex {
  display: flex;
  flex-wrap: wrap;
}
.item {
  margin: 0 10px 10px 0;
  width: 200px;
  display: flex; 
  justify-content: space-between;
}
.item svg {
  position: absolute;
  top: 5px;
  left: 0;
}
.item span {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  max-width: 200px;
}
.item img {
  width: 30px;
  margin-left: 7px;
  display: inline-block;
}
<div class="flex">
   <div class="item">
     <span>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
    </div>
    <div class="item">
     <span>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
   </div>
    <div class="item">
     <span>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
   </div>
 </div>

Answer №5

 <div class="flex">
    <div>
        <div class="item">
            <span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
        </div>
        <div class="item">
            <span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
        </div>
        <div class="item">
            <span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
        </div>
        <div class="item">
            <span>France <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
        </div>
    </div>
</div>

Add an additional child element and wrap all child elements together to center the inner content while maintaining the original position of the children.

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

Surprising behavior of translateZ in Framer Motion

Trying to position elements in a circular layout has led to unexpected behavior when using framer motion's translateZ. By applying styles with a template literal without shorthand for transforms, the desired effect is achieved: transform: ` rotateY( ...

cssreactjsframer-motion

Can the parent document interact with Shadow DOM elements?

When it comes to user-created shadow DOM elements, this question focuses more on accessibility using the date input type: For instance, let's say there is a date input on a webpage. After some editing, the shadow DOM markup for this element (in Chrom ...

javascripthtmlweb-componentshadow-dom

I am struggling with aligning the list items side by side

I am currently facing an issue with my list items that have anchor tags. They are currently set to display block with background images, but I want them to display inline. However, they are stacking on top of each other instead. The ul is being generated b ...

csswordpresslistmenuinline

Tips for adjusting the default width of the container in Bootstrap3

Modifying the default width of a Bootstrap 3 container without causing any alignment issues can be a challenge. The default container width currently set is .container { width: 1170px; } However, I am looking to adjust it to .container { wid ...

htmlcsstwitter-bootstrap-3

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

This is my first venture into the world of HTML and JavaScript, so I am asking for your patience. I am trying to incorporate the Datepicker widget from jQuery UI, following the instructions on the Getting Started page. There seems to be an issue with lin ...

javascriptjqueryhtmljquery-uijquery-ui-datepicker

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?

Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...

htmlcssinternet-explorerresponsive-design

Increasing Taxes and Boosting the Overall Cost

How can we set up a system where taxes are bypassed by default unless otherwise specified when placing an order? Let's take a look at the following text box: <input class="txt1" type="text" name="subtotal" value="" id="subtotal" size="16" ta ...

javascriptjqueryhtml

Error in Angular timer causing NaN result

Struggling to create a timer in JavaScript, a basic one at that. I wrote what I thought was correct code, but it's not functioning properly - resulting in the textbox value changing to NaN after just one second. Below is the code snippet: <timer ...

javascripthtmlangularjsionic-framework

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

javascriptjquerycsshtml

How to toggle between displaying divs using JavaScript and Jquery

How can I use JavaScript to show or hide specific divs on page load and upon clicking different links? I want to display the "houseImages" div by default, while hiding the "landImages", "renovationImages", "UpcomingImages", and "voteForNext" divs. Then, w ...

javascriptjqueryhtmlhideshow

The influence of 'overflow' values, aside from 'visible', on the block formatting context

Not quite like this particular question on Stack Overflow, mine doesn't involve float issues but rather troubles with applying margins to a block-level element's only child. I encountered a dilemma while attempting to add a margin to an only-chi ...

htmlcss

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

htmlcsstwitter-bootstrapalignmentbootstrap-4

Replace the single text area with multiple div elements and update the image within each div

Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time. Currently, ...

jqueryhtmlcss

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...

htmlcssvue.jsvuetify.js

Challenges encountered with Material-UI elements

Attempting to implement the http://www.material-ui.com/#/components/drawer (Docked Example) component from Material-UI in conjunction with ReactJS. An error is encountered with the "=" sign in this line: handleToggle = () => this.setState({open: !this ...

javascripthtmlreactjsecmascript-6material-ui

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

htmlcssangulartypescriptng2-bootstrap

Is it required to double click checkboxes to uncheck them?

My checkboxes require 2 clicks to be unchecked, even though one click is enough to check them. This issue occurs in all 7 checkboxes and there is no onchange() function or similar in TS. import { Component, OnInit, Inject } from '@angular/core&apos ...

htmlcssangular

Creating an intelligent autocomplete feature in JavaScript that recognizes the . character as a wildcard for matching any character

I found this code and would like to enhance its functionality. For instance, when I search for ".an.d", I want the code to display all words that have an "a" at the second position, "n" at the third position, any character at the fourth position, and "d" ...

javascripthtmlcss

Tips for aligning the text in a navigation bar to the center

My CSS skills are not very strong. How can I center the text "My Website" in my navbar based on this code? You can view a working example on JSFiddle here: https://jsfiddle.net/cvp8w2tf/2/ Thank you for your assistance! ...

htmlcsstwitter-bootstrapnavbarcenter

CSS menu - Shifting bar: What's the issue?

I'm struggling to add a moving bar to my website's navigation and need some help. I tried following a tutorial at the following link: (http://css-tricks.com/jquery-magicline-navigation/) Here is what I ended up with: If anyone could take a look ...

jquerycssmenuslidernav