Aligning content at the center of an inline parent vertically

Attempting to design an adaptive post meta for a post card.

The challenge is handling cases where the post meta contains multiple categories, requiring them to be wrapped while vertically centering the content within the li elements (such as avatars and icons).

I experimented with applying display: inline-flex to the .entry-meta class to utilize the align-items: center property. However, this caused the list items (li) to no longer wrap neatly like when using display: inline on li.

1. The display: inline approach (with no vertical centering)

This method successfully wraps all list items as intended but does not vertically center the content (avatars and icons).

...

2. The display: inline-flex strategy

Although this aligns the content vertically, the category li elements are not wrapping correctly and break into new lines.

...

In summary, I aim to preserve the wrapping behavior of list items achieved with display: inline, while also vertically centering the content inside.

P.S. Attempting to use the vertical-align: middle property proved unfruitful :)

cssinlinecenter

Answer №1

P.S. The vertical-align: middle property doesn't seem to be effective :)

Here is the code snippet you need to apply to the `.avatar` class:

article {
  max-width: 450px;
  background: #eee;
  font-family: arial;
  font-size: 12px;
  text-transform: uppercase;
}

article a {
  text-decoration: none;
}

.entry-meta {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-meta li {
  display: inline;
  margin-right: 10px;
  background: #ccc;
}

.avatar {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: #FA7059;
  vertical-align:middle;
}

.icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #BE4C4E;
}

You can use this HTML structure with the CSS classes applied:

<article>
<ul class="entry-meta">

<li class="author">
<div class="avatar">
</div>

<span>By&nbsp;</span>

<a href="#">Admin</a>
</li>

<li class="date">
<span>On&nbsp;</span>
<time>Feb 22, 2019</time>
</li>

<li>
<span>On&nbsp;</span>
<a href="#">2 Comments</a>
</li>

<li class="categories">
<span class="icon">
</span>

<a href="#">Food</a>
<a href="#">Nature</a>
<a href="#">People</a>
<a href="#">Travel</a>
<a href="#">Trends</a>
<a href="">Business</a>
<a href="">Sport</a>
<a href="">Music</a>
<a href="">Gadgets</a>
<a href="#">Uncategorized</a>
</li>

<li class="tags">
      <span class="icon">
</span>
      
<a href="">Red</a>
<a href="">Blue</a>
<a href="">Green</a>
<a href="">Yellow</a>
</li>

</ul>
</article>

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

Cursor customized image vanishes upon clicking anywhere on the page on a MAC in various web browsers

I am currently trying to set a custom image as the cursor using jQuery in this manner $(document).ready(function(){ $("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto'); }); While this method works, ...

jqueryhtmlcss

Can CSS be altered dynamically in Laravel blade?

Is there a way to dynamically change CSS? I am trying to set the class=sheet padding-top: 28mm; when the size of $anArray is less than 30. If the array has more than 30 elements then apply padding-top: 28 * 2 mm;. Finally, if the array exceeds 60, use pad ...

javascriptcsslaravel

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml

The Bootstrap table spills off the page and the navbar fails to align properly with the screen

A complex question awaits your attention. I must clarify that I lack the expertise of a professional web developer. I have already attempted the solutions referenced here and here The provided image represents the mobile view, whereas the desktop view app ...

htmlcssbootstrap-4

Ensure the background image is repeated without any cropping or adjust it to make it symmetrical

Looking for this: https://i.sstatic.net/zz8lP.png Wanting this (also cropped but symmetrical): https://i.sstatic.net/Wrrlh.png What I currently have: https://i.sstatic.net/S1qtM.png div.row.separator div.col { height: 40px; width: 100%; padding: 0px ...

htmltwitter-bootstrapcsstwitter-bootstrap-4

ReactJS Material UI Horizontal Menu with CSS Styling

I am currently working on creating a horizontal menu with ReactJS and Material UI. However, I am facing a challenge where the menu is not responsive. Even when I resize the browser window, the menu size remains the same and only updates when I refresh th ...

cssreactjsecmascript-6material-ui

Tips for creating a textfield with height that responds dynamically in Material UI

I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating ...

cssreactjsmaterial-ui

Dynamic menu causing interference with other elements of the code

When the width reaches a maximum of 37.em, the navigation styled under a hamburger menu automatically opens. I would prefer it to remain closed rather than open when scaled to that size. It also allows the underlying menu underneath it (div.gallery with cl ...

javascripthtmlcss

CSS Issue with Background Image not Fully Covering Viewport Width

Why isn't the CSS background covering the entire viewport width when using media query @media (max-width: 62.5em)? https://i.sstatic.net/yvGWd.png I've attempted to use background-size: cover, background-position: top left, and background-repea ...

htmlcssbackgroundmedia-queriesbackground-image

How come the div elements in my list are expanding beyond their container?

Below is a simplified version of my code that illustrates the issue I'm facing. I am trying to enclose all the elements within a box and enable scrolling for the .content section. So far, all my attempts at resolving this problem have been unsuccessfu ...

htmlcss

Ensure that items are properly aligned within a container with full width and an overflow:scroll property

I'm facing a bit of a challenge here... I have a container with a max-width setting, and inside that container, I want to have a slider that spans the full width with horizontal scrolling capability. To achieve this, I followed the instructions from ...

htmlcss

Optimize your CSS Grid gallery with effective image descriptions and enhanced text management

I have set up a grid gallery on JSFiddle and everything is functioning as expected. I have successfully added descriptions below the images, but encountering issues when attempting to add additional text below the descriptions. When inserting text within t ...

htmlcssgallery

scrapy css last-child selector unable to target text

I am currently facing a challenge in selecting and matching elements within an HTML document using CSS selectors in the Scrapy framework. My issue lies with extracting information from a specific field using the last-child selector. Below is the snippet o ...

htmlcssscrapy

Position a variable-height block to the bottom right corner of another element with a dynamic height

Can a block of text with an unknown height be aligned to the bottom right of a parent element with an unknown height, using only CSS? I have tried using flexbox, float, and absolute positioning, but haven't been able to find a solution. There is an a ...

htmlcss

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...

javascripthtmlcss

Customizing padding and margin in material-UI styles

Having issues with excessive padding and margin inside my tab component, even after trying to override it. I've followed some suggestions on StackOverflow but none seem to work. Here's how it looks: https://i.stack.imgur.com/Bgi3u.png Here is th ...

cssreactjsmaterial-ui

How can one go about incorporating the feature "updating list upon clicking a label" on a webpage?

On my website, I currently display a comprehensive list of publications. However, I am looking to organize these publications by various research topics using labels. Ideally, when clicking on a specific label, only the papers related to that topic will be ...

javascripthtmlcss

What is the best method to ensure that my background image is fully visible on a webpage?

I'm attempting to place a background image at the center of my webpage, but unfortunately, the image extends beyond the page boundaries and is only partially visible. Below is my CSS code snippet: body{ background-image: url(../img/music_palace_ ...

htmlcssimage

Position three divs in the center and at the top of my master page

My goal is to position 3 divs on top of each other efficiently without wasting space. The first div contains a logo image, the second is a search box, and the third, located at the right side, is a login/logout control. I have attempted to use CSS to floa ...

javascriptcsshtml

Display a loading image during the execution of the Exec_Shell Script

Looking to add a loading image while script.sh is executing Check out the code snippet below: <?php if (isset($_POST['restartserver'])) { shell_exec("my-script.sh"); } ?> <html> <body> &l ...

phpjqueryhtmlcssajax