Using an inline-block display and pseudo-elements for creating vertically aligned content

Currently, I am utilizing display:inline-block and pseudo-elements (::before, ::after) to achieve vertical alignment in the middle, but unfortunately, it seems to be ineffective. The pseudo-element ends up taking a whole row of space even with a width set to 0. What could be causing this issue?

I am aware of alternative methods like using flex, position, or adjusting line-height. However, I am intrigued as to why the current approach is not working correctly. Any insights would be greatly appreciated. To view a demonstration, you can check out the following link: https://jsfiddle.net/pm06tkjs/

.container{
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
}

.container::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.img-group {
  display: inline-block;
  vertical-align: middle;
}

img {
  display: inline-block;
  margin-right: -4px;
  max-width: 20%;
  height: auto;
}
<div class="container">
  <div class="img-group">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
  </div>
</div>

htmlcss

Answer №1

One common issue is the default margin between your inline elements. To fix this, you can add font-size:0 to the parent element of your inline elements.

.container{
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  font-size:0;
}

.container::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.img-group {
  display: inline-block;
  vertical-align: middle;
  font-size:0;
}

img {
  display: inline-block;
  max-width: 20%;
  height: auto;
}
<div class="container">
  <div class="img-group">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
  </div>
</div>
For more details on removing gaps between inline elements, you can check here.

Answer №2

Method 1: To adjust the size of the image group, you can set the width to less than 100%.

.group-container{
      height: 200px;
      background: rgba(0, 0, 0, 0.2);
    }

    .group-container::before {
      content: '';
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    }


.image-group {
    display: inline-block;
    vertical-align: middle;
    width: 99%;
}

img {
  display: inline-block;
  margin-right: -4px;
  max-width: 20%;
  height: auto;
}
<div class="group-container">
      <div class="image-group">
        <img src="https://www.example.com/image1.jpg" alt="">
        <img src="https://www.example.com/image2.jpg" alt="">
        <img src="https://www.example.com/image3.jpg" alt="">
        <img src="https://www.example.com/image4.jpg" alt="">
      </div>
    </div>

Method 2: If you are using the display inline block property with a margin in the image, you can add width 100% and adjust the margin left accordingly. 

.group-container{
      height: 200px;
      background: rgba(0, 0, 0, 0.2);
    }

    .group-container::before {
      content: '';
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    }

    .image-group {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        margin-left: -4px;
    }

    img {
      display: inline-block;
      margin-right: -4px;
      max-width: 20%;
      height: auto;
    }
<div class="group-container">
      <div class="image-group">
        <img src="https://www.example.com/image1.jpg" alt="">
        <img src="https://www.example.com/image2.jpg" alt="">
        <img src="https://www.example.com/image3.jpg" alt="">
        <img src="https://www.example.com/image4.jpg" alt="">
      </div>
    </div>

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

Connect various inputs in Vue.js so they can be updated simultaneously

I need to have multiple text inputs that are interconnected, so when I change the value of one input, the others should update with the same value. These inputs are being generated dynamically in a loop using v-for as shown below: <tbody> <varia ...

javascripthtmlvue.js

clear background with logo embossed

I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...

htmlcss

Prevent the table cell width from expanding beyond the content size

Is there a way to achieve this layout without relying on Javascript? Imagine having a <table> with an unknown width in the first column. The overall <table> width is set to 100% to allow other columns to resize accordingly, but is it possible ...

htmlcss

Images in the center with a div overlay on top

I'm attempting to place a div or span on top of an image that is positioned above another image. Both images are centered and resized to fit. The height of my images is greater than the width, but they are not set at a fixed size. I want the div to pe ...

htmlcss

Unique hover tags such as those provided by Thinglink

Looking for a way to replicate the functionality of Thinglink? Imagine a dot on an image that, when hovered over, displays a text box - that's what I'm trying to achieve. I thought about using tooltips in Bootstrap, but I'm not sure if it ...

javascriptjqueryhtmlcsstwitter-bootstrap

trouble with react-table's default height and flexible design

I am facing an issue with my React table configuration. I have set up scrollable columns and header following a similar example here: https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310 In the table styles, I have specified a height like this: ...

cssreactjsreact-table

What are the steps to implementing PNG masking using PixiJS?

I am currently working on incorporating a png sprite as a mask for another layer. I found a demo on the pixi.js official website and created this fiddle: https://jsfiddle.net/raphadko/ukc1rwrc/ The code snippet below is what I am using for the masking fu ...

javascriptcsspixi.js

Achieving universal functionality for html-to-image conversion across all div elements

Using html-to-image, I am able to capture screenshots of a specific div that users can then download as a .png file. My code implementation is as follows: export default function App() { const contentRef = useRef(null); const handleCapture = () => ...

htmlnpmhtml-to-image

Implement dynamic CSS color selection based on server-side data

Introduction At our company, we manage a large client website in Optimizely (ASP.NET MVC) that hosts multiple smaller sites for different regions and important customers. Currently, our frontend team creates various themes using SASS to CSS conversion, w ...

cssasp.net-mvc-4sass

Checkbox enabled Bootstrap image

I am encountering a minor issue where I am attempting to incorporate a simple image that can be toggled on and off by clicking on it. After coming across some bootstrap code online, I decided to test it in my project. Unfortunately, the code does not seem ...

javascripthtmlcss

Navigate to a different page after completing form submission

I am facing an issue with navigating between pages on my website. I have a form that processes data upon submission, and after processing, I want to redirect the user back to the previous page. Currently, my webpage consists of a list of links that lead to ...

phphtmlhttp-redirect

Internet Explorer is failing to display images

Hey there! I'm having an issue with my product listing where the images are not showing up in Internet Explorer, even though it works fine in all other browsers. Here is the code snippet for the image container: Image container: <div class="image ...

jqueryhtmlcssinternet-explorer

Determine the dynamic element's value based on checkbox selections

Need help with my HTML form. I'm trying to extract the value of the element with an id of type when clicking checkboxes. Despite having two elements with values ML and PH, it only returns 'PH' each time. Any insights on this behavior? ...

htmljquerycheckbox

Conceal and reveal submenu options

I have been exploring a jQuery function that toggles between hiding and showing different divs when a menu item is clicked. However, I am facing an issue where clicking on the same menu item does not close the newly opened div as intended. Additionally, I ...

javascriptjqueryhtmlcss

updating the row of an html table with elements from a javascript object

I am faced with the task of dynamically adding rows to a table based on the number of elements in my JavaScript object. The object consists of keys and arrays of values. userobject={ ID: [1,2,3] IP_Address: ["12.21.12 ...

javascripthtml

It appears that the pixel sizes are different than what was originally designed

In my project, I have a header panel where the burger button is designed with a width of 32px and height of 24px. .header { display: flex; font-weight: bold; font-size: 50px; height: 100px; border: 1px solid black; position: relativ ...

javascripthtmlcssuser-interfacefrontend

Use jQuery to retrieve the response from a JSON request and showcase it on the existing HTML page

Currently, I am working on a project that involves integrating a JSON-based web service from a remote server. The method of this service can be accessed by using specially formatted URLs such as: http://root-url/ws/service-name?request={json-string} The ...

javascriptjqueryhtmlajax

Issue with IE7 causing rollover navigation blocks to disappear when hovering over content

While conducting browser testing on the website The website's top navigation menu includes rollover effects for building services, exterior services, and commercial categories. The CSS-triggered navigation works seamlessly in all browsers except for ...

htmlcssinternet-explorer-7navigation

What is the best way to extract information from a JSON file and display it on a webpage using

I am new to this and I have a question for everyone Here's an example of the JSON response from my URL: The JSON data returned is as follows: { "Data":{ "id": 1312, "Name": "Steem Dollars", "Symbol": "SBD", "website_slug": "steem-dollars", "Level": ...

htmljson

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

htmlcss