Tips for aligning text vertically in a column using CSS columns

Can text be vertically aligned in CSS columns? For example, aligning text to the top, center, or bottom within each column?

I attempted to use vertical-align, but it doesn't seem to work on an unordered list or its items:

html

<div class="nav-banner__list-wrapper">
  <ul class="nav-banner__list">
    <li class="nav-banner__list-item">Some Item</li>
    <li class="nav-banner__list-item">Some Item</li>
    <li class="nav-banner__list-item">Some Item</li>
    <li class="nav-banner__list-item">Some Item</li>
  </ul>
</div>

css

.nav-banner__list {
  vertical-align: center;
  column-count: 2;
  width: 70%;
  margin-left: 20px;
}

.nav-banner__list-item {
  vertical-align: center;
  list-style: none;
}

Answer №1

Implement the display: flex alongside the align-items: center CSS properties in your code.

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

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

unwelcome tab spacing in CSS

I am facing an issue with unwanted spacing in my lists. I have a code that generates three-column lists, each containing about eight rows. However, the first list item of the last row is causing an unwanted space. It seems to shift entirely to the next col ...

Preventing the elements within a div section from shifting position

I am facing an issue with a div section that contains multiple <a href=""> tags. When I shrink the div section on the page, the contents move when a user tabs into it. Is there a way to lock the div section so that its contents do not move? For exam ...

Is it possible to make nested HTML list items align to the left?

Is it possible to align nested HTML list items to the left? For example: Bat Cat Ratonetwothree Mat <ul> <li>Bat</li> <li>Cat</li> <li>Rat<ul><li>one</li><li>two< ...

The transition between backgrounds is malfunctioning

I want to create a smooth transition effect for changing the background of an element within a setInterval function. Currently, the background changes immediately, but I would like it to transition over a period of time. var act = true; setInterval(func ...

Creating a Stylish Navigation Bar with Bootstrap4 - Organizing Elements for Just the Right Look

I am trying to organize my content within a navbar into 3 different 'columns'. I want a logo on the left, some navigation items in the center, and the last element ("Get The App") on the right, but I am facing some challenges. Below is my code s ...

Scrollspy in bootstrap incorrectly highlights the navigation item as active

I seem to be having an issue with bootstrap scrollspy. For example: <header class="header pb-4 pb-lg-0 pt-4 sticky-top bg-white"> ... </header> <div class="container-fluid width content-main" data-bs-spy=" ...

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native. Is there a way to implement this example using react-native bootstr ...

Adjusting the dimensions of the canvas leads to a loss of sharpness

When I click to change the size of the graph for a better view of my data in the PDF, the canvas element becomes blurry and fuzzy. Even though I am using $('canvas').css("width","811"); to resize the canvas, it still results in a blurry graph. I ...

Is there a reason why using margin:auto doesn't work for vertically centering items?

I'm having trouble understanding how margin auto functions. In the scenario I'm dealing with, I have a parent div and a child div nested within it, both with specified widths and heights. I attempted to use margin auto in order to center the inne ...

Creating a rotating circle in CSS with ion-slides: A step-by-step guide

Hello, I am attempting to develop a circular object that will rotate in the direction it is dragged. Within this circle, there are elements positioned along the border so that these elements also spin accordingly. To illustrate, below are the specific elem ...

Troubleshooting problems with resizing images using CSS

I am experiencing an issue with resizing images that I have configured in the admin panel. .users-list>li img { border-radius: 50%; max-width: 100%;    height: auto;     width: 100px;     height: 100px; } When enlarged, the images l ...

Exploring the possibilities of customizing gutters in Bootstrap v4 Beta

Is it possible to customize grid gutters at different breakpoints? I am aware that Twitter invested millions of dollars in perfecting Bootstrap v4, and I don't expect to overhaul everything overnight. However, I am curious if there is a way to create ...

Console not displaying any logs following the occurrence of an onClick event

One interesting feature I have on my website is an HTML div that functions as a star rating system. Currently, I am experimenting with some JavaScript code to test its functionality. My goal is for the console to log 'hello' whenever I click on ...

Equal-height rows and columns using Flexbox

I've been working on a row layout with two columns, each set to 50% width. The left column contains an image, while the right column displays text. Here is my HTML: .row{ display:flex; ...

The alignment of the submit button is consistently off when placed alongside two input boxes within a table

Completing this task is usually straightforward. I have a sign-in form with an email input, password input, and submit button aligned horizontally. However, after trying various styles and structures for hours, the button appears slightly lower than the in ...

Using Javascript to deactivate a clickable image upon clicking another image

I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning ...

The vertical scrolling feature seems to be malfunctioning within my angular 10 application

I'm having an issue with the scrollbar not working on this Angular 10 template, even after adding the CSS style overflow: auto; to the main container. Although I've included the overflow property in the main container "cont" as shown in the HTML ...

Why isn't the CSS outline property functioning properly within the handlebars?

I am working on a login form within a Handlebars page and I am trying to figure out how to set the default outline property to none for that particular element. Does anyone know how to do this? Snippet of code from the Handlebars file <input type=" ...

slow loading background slideshow in css

Creating a simple slideshow for the background using CSS has been successful, but I am facing an issue with making all backgrounds utilize background-size: cover. I want the images to fit properly on the screen. Another problem is that the pictures take a ...