Align text in a vertical manner within various containers

I'm encountering a puzzling issue with my side-by-side divs. I have different-size headers in each div, and I want the top header in each to be baseline aligned. Unfortunately, using vertical-align: baseline doesn't seem to work between the two divs. Below is an excerpt of my code (written in sass):

.about-page-column {
  display: inline-block;
  vertical-align: top;
  width: 49%;
  margin-top: 5px;
  text-align: center;
  padding: 5px;

  h3,h4 {
    padding: 5px;
    vertical-align: baseline; // this line seems ineffective
    font-family: 'Rubik', sans-serif;
    text-decoration: underline;
    color: $page-title-color;
  }

  h3 {
    font-size: 2em;
  }

  h4 {
    font-size: 1.5em;
  }
}
<div>
  <div class="about-page-column">
    <h3>Experience</h3>
  </div>
  <div class="about-page-column">
    <h4>Links</h4>
  </div>
</div>

The headers are currently aligning by their tops due to floating to the top of the vertical-align: top divs.

https://i.sstatic.net/4InXC.png

Could anyone advise on a method to align the headers within their respective divs so they are vertically aligned by their baselines? Alternatively, if this isn't possible, do you know of any effective workaround?

Your help is greatly appreciated!

htmlcss

Answer №1

To create a flexible layout, I recommend using a flex-container. Your first div should look like this:

<div class="flex-container">
  <div class="about-page-column">
    <h3>Experience</h3>
  </div>
  <div class="about-page-column">
    <h4>Links</h4>
  </div>
</div>


.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Remember, if you set the flex-direction to column, the functions of justify-content and align-items will swap.

For more information about flexbox, check out these resources:

MDN Web Docs - Flexbox

W3Schools - CSS Flexbox

Answer №2

If you're looking for a solution, this piece of code may be just what you need. It ensures that the bottom of each heading is aligned, although keep in mind that the underline will vary depending on the font size.

<div class="headers">
    <div class="about-page-column">
        <h3>Experience</h3>
    </div>
    <div class="about-page-column">
        <h4>Links</h4>
    </div>
</div>

.headers {
    display: flex;
    align-items: baseline;

    .about-page-column {
        display: inline-block;
        vertical-align: top;
        width: 49%;
        margin-top: 5px;
        text-align: center;
        padding: 5px;

    h3,h4 {
       padding: 5px;
       font-family: 'Rubik', sans-serif;
       text-decoration: underline;
       color: $page-title-color;
    }

    h3 {
       font-size: 2em;
    }

    h4 {
        font-size: 1.5em;
    }
}

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

Learn the method of centering flexbox vertically by using the flex-wrap property with the value

enter image description here I am currently working on a to-do list project. Whenever I add a folder, it appears vertically aligned. (click the /Bottom bar/ button -> it will display a folder in the /Homecomponent/) Each new folder I add goes further ...

cssreactjsflexbox

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

javascriptcssreactjsmaterial-ui

What is the best way to emphasize a row in an Angular Material table based on a

I am facing an issue with highlighting row colors conditionally in my code. Although there are no errors, the background color is not being applied to the rows as expected. I have a total of 5 rows with the 'riskIndex' value set to 'H'. ...

htmlcssangularangular-material2

Adjusting the size and adding ellipsis to the <td> component within a table

How can I set a fixed width for td elements in a table and use text-overflow: ellipsis to truncate the text inside the cells? I have attempted various methods without success. Can someone provide guidance on how to achieve this? <table> <tr& ...

htmlcsshtml-table

retrieving data from a dropdown selection

Help! I'm stuck and need guidance. Below is the code I've been working on, attempting to set a variable using a drop-down list. Despite trying everything I can think of, I still seem to be missing something simple. Any hints or nudges in the righ ...

javascripthtml

Implementing a NextJS button using the Link component

I am curious about how to incorporate a button inside a NextJS Link component. Usually, when you wrap the button in a Link and click on it, the onClick event is triggered and then it redirects to the value specified in the href attribute. Is there a way t ...

htmlreactjsnext.js

When the open button is clicked, the Div will toggle between open and closed states

Recently, some of my questions have not been well-received, which makes me feel a bit disheartened. It's important to remember to be kind when providing feedback. I've noticed that some people downvote without offering constructive criticism, whi ...

javascriptjqueryhtmlcsspopup

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

I'm looking to create a mouse trail that follows the cursor as it moves, made up of small icons or images that gradually fade out over time. I attempted to achieve this by overlaying a grid on top of all other elements on the page. The grid consists o ...

javascriptcss

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

javascripthtmltypescriptionic2ionic3

Hover or click on HTML input type using CSS in your webpage

I am currently working on adding hover effects to my elements. I have successfully added a hover effect to the outer list item, but I am wondering how I can achieve the same effect on the <input> element instead of the <li>. ul.slides li:hov ...

jqueryhtmlcss

Styling the nested list items with text decoration

I have a scenario where I applied text-decoration: underline; to the parent li, which is being inherited by the child li. Despite trying to remove this style from the child elements using text-decoration: none !important;, it doesn't seem to work. The ...

htmlcsshtml-lists

Declare a jQuery variable containing HTML elements

Greetings! I am facing an issue while attempting to create a jQuery variable that stores a table meant for displaying in different sections of a website. Unfortunately, I am encountering an error and struggling to comprehend the reason behind it. Below is ...

jqueryhtmlvar

The tooltip of the Material UI IconButton is displaying incorrectly

Within my ReactJS application, I am utilizing Material UI along with react-bootstrap-table components. One particular cell in my application utilizes the Material UI IconButton as shown below: <IconButton tooltip={t('tooltips:editRegulation&apos ...

cssreactjsmaterial-ui

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js

Choosing a Radio Button with a Labeled Option

I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label: inp ...

htmlruby-on-railscssradio-button

Managing the attention on a switch button

I'm struggling to maintain focus on the toggle button after it's been clicked. Currently, when I press the button, the focus jumps to the top of the page. I can't figure out what I'm doing wrong. Below is the code snippet: HTML <b ...

javascriptjqueryhtmlangularjs

What is the purpose of using an img tag to retrieve a URL that is not an image?

Upon investigating a slow page load, I came across something interesting in the HTML: <img src="/ajax?action=askedAboutCookies" style="display:none" width="0" height="0" alt="" /> When the page loads, it sends a request but never receives a respons ...

javascriptjqueryhtmljson

Place the blockquote in the middle, but maintain the text's alignment to

I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap). To see the full code, take a ...

htmlcssbootstrap-4

Utilizing Local Files in a Bootstrap Video Carousel

Currently working on a website for a school project and I am trying to incorporate a carousel of videos. After finding a bootstrap carousel template that played videos linked to a server, I attempted to switch it out with local video files without succes ...

htmlcssbootstrap-4

Linking an image to a database-stored value through a hyperlink

My goal is to give users the option to link their social media accounts such as Facebook and Twitter, with each link displaying an image that corresponds to the platform. The intention is for these images to direct them to the links stored in the database. ...

htmlasp.net-mvc-3sql-server-2008-r2