What is the best way to vertically center all content, including borders, within the columns?

To view the codepen for reference, please click on the following link: http://codepen.io/rezasan/pen/apvMOR

I am attempting to align all the content within the columns (Date, Title, and Button, including the separator) vertically. I have tried using display table but it did not work as expected. Seeking assistance from the experts in this community.

Here is the HTML code snippet:


    <ul class="ir_home_news">                 
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
        </li>
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
        </li>
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
        </li>
    </ul>

Below is the CSS styling applied:


    ul, li {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }
    
    .ir_home_news li {
      border-top: 1px solid #ebebeb;
      padding: 10px;
    }

    .ir_home_news li:nth-child(even){
      background-color: #f8f8f8;
    }

    .ir_home_news li::after {
        content: "";
        clear: both;
        display: table;
    }

    .ir_home_news li div {
      display: table-cell;
      vertical-align: middle;
      padding: 0px 15px;
      border-right: 1px solid red;
    }

    .ir_home_news li div:last-child{
      border-right: none;
    }

    .ir_home_newsDate {
      float: left;
      width: 18%;
      margin-bottom: 10px;
      font-size: 18px;
      color:#003087;
    }

    .ir_home_newsTitle {
      float: left;
      width: 65%;
      font-size: 17px;
      color:#003087;
    }

    .ir_home_button {
      float: left;
      width: 10%;
    }
    .ir_home_button button {

      background-color: #003087;
      color: #fff;
      padding: 15px 25px;
      border-radius: 0;
      font-size: 13px;
    }

Hope these snippets help in understanding the structure of the code!

htmlcssgridvertical-alignmentcss-tables

Answer №1

Avoid using floar: left within your li element as it can cause issues with the vertical-align.

ul,
    li {
        margin: 0;
        padding: 0
    }
    
    li {
        list-style-type: none;
    }
    
    .ir_home_news li {
        border-top: 1px solid #ebebeb;
        padding: 10px;
    }
    
    .ir_home_news li:nth-child(even) {
        background-color: #f8f8f8;
    }
    
    .ir_home_news li::after {
        content: "";
        clear: both;
        display: table;
    }
    
    .ir_home_news li div {
        display: table-cell;
        vertical-align: middle;
        padding: 0px 15px;
        border-right: 1px solid red;
    }
    
    .ir_home_news li div:last-child {
        border-right: none;
    }
    
    .ir_home_newsDate {
        width: 18%;
        margin-bottom: 10px;
        font-size: 18px;
        color: #003087;
    }
    
    .ir_home_newsTitle {
        width: 65%;
        font-size: 17px;
        color: #003087;
    }
    
    .ir_home_button {
        width: 10%;
    }
    
    .ir_home_button button {
        background-color: #003087;
        color: #fff;
        padding: 15px 25px;
        border-radius: 0;
        font-size: 13px;
    }
<ul class="ir_home_news">
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button">
                <a href="">
                    <button>VIEW DETAILS</button>
                </a>
            </div>
        </li>
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button">
                <a href="">
                    <button>VIEW DETAILS</button>
                </a>
            </div>
        </li>
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button">
                <a href="">
                    <button>VIEW DETAILS</button>
                </a>
            </div>
        </li>
    </ul>

I have revised the code to remove all instances of float: left within your li elements.

.ir_home_newsDate {
    width: 18%;
    margin-bottom: 10px;
    font-size: 18px;
    color: #003087;
}

.ir_home_newsTitle {
    width: 65%;
    font-size: 17px;
    color: #003087;
}

.ir_home_button {
    width: 10%;
}

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 validating html:options collection in Struts 1.3?

A Treemap is populated with values from a database using the following Java code: Map<String, String> treeMap = new TreeMap<String, String>(map); Iterator mapIterator = mapSet.iterator(); while (mapIterator.hasNext()) { Map.Entry mapEntry = ...

javahtmljspstrutsstruts-1

The leaking of angular-material CSS onto other divs is causing unexpected styling

I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...

htmlcssangularjs

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is t ...

htmljquerycss

The submission of the HTML form is resulting in a lack of values being returned by

I am new to HTML and PHP programming. I have been struggling with an issue where the data submitted from a form is not being fetched by $POST, resulting in empty values being sent via email. I have spent a considerable amount of time trying to solve this p ...

phphtml

Display the column every time the user types something into the search bar

Currently working on an Angular project and I'm trying to figure out how to make the middle column visible whenever the user enters text in the search bar. At the moment, I have a search bar for user input and three flex columns. The middle column is ...

htmlcssangularlayoutmultiple-columns

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

Utilize the appendTo() function and make a switch to dynamically insert content stored in variables into a specified

I am working on developing a page with a central content div, where users have the ability to choose various options that will introduce different additional content. This added content will then present more opportunities for adding new elements, ultimate ...

javascriptjqueryhtmlcssdom

Make sure to have the list available while choosing an item

I want to design a unique CSS element with the following characteristics: Include a button. When the button is clicked, a list of items (like a dropdown list) should appear. We should be able to select items by clicking on them, and the parent component s ...

cssreactjsdrop-down-menufluent-uifluentui-react

The sweetalert 2 input field is unresponsive or disabled within a materializecss modal, making it impossible to type in

My modal includes a SweetAlert2 popup when I click the "add bills" button. The code for this feature is from their documentation, so I don't believe the issue lies there. However, I am experiencing a problem where the input field is not type-able and ...

javascriptcssmaterializesweetalertsweetalert2

What is the best way to delete the onclick event of an anchor element?

Struggling to remove the onclick attribute using jQuery? Here's my code: function getBusinesses(page){ if(page==0){ alert("you are already on First Page"); $("#previous a").removeAttr("onclick ...

javascriptjqueryhtml

Utilize data retrieved from an API to customize the appearance of buttons through the combination of React and Sass styling techniques

I retrieved data from an API and used it to create a list of buttons. The data I received includes names and color codes. { name: "bob", colorCode: "#DC7472" }, { name: "ben", colorCode: "#69DCD1" }, { name: &q ...

javascriptcssreactjssass

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

What is the trick to having the ball change colors every time it hits the wall?

Recently, I stumbled upon this interesting ball bouncing question while searching for some JavaScript code. While the basic bounce animation was simple to achieve, I started thinking about how we could make it more dynamic by changing the color of the ball ...

javascripthtmlcsshtml5-canvas

What is the best way to navigate between elements using AJAX?

My experience in Ajax is minimal. I've managed to create two <li> elements with <a> elements inside, each linking to different HTML files. My goal is for clicking on a link to automatically load the corresponding HTML file without refreshi ...

htmljquerycssajax

Placing the input-group-addon above the text-input for better positioning

Feeling overwhelmed trying to finalize a simple form due to CSS issues? Check out this image for a visual of the problem: https://i.stack.imgur.com/PgCmN.jpg The label is slightly off to the left, and the button appears larger than the input field. The i ...

htmlcsstwitter-bootstrap-3

What is the best method to eliminate the "All Files" selection from a file input dialog

<input type="file" accept=".jpg"> By setting the accept attribute to ".jpg", the file selection dialog will only allow JPG files. However, some browsers also provide a dropdown menu option for selecting All Files: All Files (*.*). Is there a way to ...

html

Adjust the text area to automatically expand or shrink based on the text it contains

Is there a way to automatically adjust the size of a textarea based on its content? Here is the code I am currently using for this purpose: var element = document.getElementById(event.target.id); var content = $(this).val().trim(); if (content == "") { ...

javascriptjqueryhtmlcss

Using jQuery to create a flawless animation

I am currently working on an animation project, and I have shared my progress on jsfiddle. Below is the code snippet I have utilized: /* JavaScript: */ var app = function () { var self = this; var allBoxes = $('.box&apos ...

javascriptjqueryhtmlcssanimation

What causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this: <d ...

htmlcssvalidationdomcross-browser

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

In the snippet below, you'll find the HTML code that pulls an array of 6 objects from a database and displays them in a Bootstrap row successfully. <div class="row products"> <?php while($product = mysqli_fetch_assoc($featured)) ...

javascriptphpjqueryajaxhtml