Achieving perfect alignment for CSS heading and floated controls in the center of the page

I seem to encounter situations where I need inline-block elements on opposite ends of the same "line" while also needing them to be vertically aligned.

Take a look at this example: http://jsfiddle.net/96DJv/4/ (focus on aligning the buttons with the heading)

This is the code snippet:

<div class="people">
    <div class="head">
        <div class="controls">
            <button>Delete</button>
            <select>
                <option>Some Option</option>
            </select>
            <!-- other inline-block elements -->
        </div>
        <h1 class="title">Title</h1>        
    </div>
    <table class="list">
        <tr>
            <th>Name</th><th>Age</th><th>Score</th>
        </tr>
        <tr>
            <td>John</td><td>14</td><td>200</td>            
        </tr>
        <tr>
            <td>Jack</td><td>23</td><td>2100</td>
        </tr>
    </table>
</div>

The styling:

.people {
    width: 400px;
}

.list {
    width: 100%;
}

.list th {
    text-align: left;
}

.title {
    overflow:hidden;
}

.controls {
    float: right;    
}

.head {
    background-color: #F1F1F1;
}

I've heard that floating an element removes the ability to adjust its vertical alignment. Is using position: absolute or tables my only options? Is there another way to achieve this?

I've been searching for a solution tirelessly but haven't found one yet.

Answer №1

Hey there,

I've devised a solution that involves minimal alterations to the HTML code and some tweaks to the CSS styling.

HTML

<div class="users">
<div class="header">
    <h2 class="heading">Heading</h2> <-- Moved H2 tag above the settings div
    <div class="settings">
        <button>Remove</button>
        <select>
            <option>Another Option</option>
        </select>
    </div>                  
</div>
<table class="data">
    <tr>
        <th>Name</th><th>Age</th><th>Grade</td>
    </tr>
    <tr>
        <td>Alice</td><td>22</td><td>A+</td>            
    </tr>
    <tr>
        <td>Bob</td><td>31</td><td>B-</td>
    </tr>
</table>

CSS

 .heading {   
      display: table-cell;
    }

.settings {
  display: table-cell;    
  vertical-align: middle;
  text-align: right;
}

.header {
    display: table;
    width: 100%;
    padding: 10px;
    background-color: #EFEFEF;
}

Check out this snippet http://jsfiddle.net/4yPtK/

UPDATE 1: For those who prefer not using table display in the markup, here's an alternative approach:

To center the controls, ensure its line-height matches the font size + line height of the title.

.heading {
    overflow:hidden;
    font-size: 1.8em;
    line-height: 1.8em;
}

.settings {
    float: right; 
    line-height: 3.6em;
    vertical-align: middle;    
}

Answer №2

To vertically center the content of your head class, simply apply display: flex and add align-items: center.

Here is a link to an example on how to achieve this: http://jsfiddle.net/96DJv/5/

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

AngularJS flip card animation

Exploring the new AngularJS method for animations during page transitions, I am keen on integrating a card flip effect (resembling http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: ...

The case of the elusive Firefox overflow: hidden glitch

Recently, I integrated an image slider into my web design and it displayed perfectly on Internet Explorer and Chrome. However, when viewed on Firefox, I encountered a strange problem where the images in the slider were being pushed towards the right side o ...

Behold the magic of a three-column layout with sticky scroll behavior and an absolute

I am struggling with a layout that involves 3 columns, each with its own independent scroll. The first column contains an absolute element that should overflow on the x-axis, but I am having trouble getting the overflow-x:visible property to work when comb ...

How do I make an element stay in place between two other elements?

Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...

Tips for effectively applying an image as a border

Just starting out with HTML and CSS here, and I'm trying to figure out how to use an image as a border for a div element. Can someone help point out my mistake? div { width: 240px; height: 510px; background-color: lightblue; border-image ...

Eliminating the gray background using CSS

How can I remove the gray background that automatically appears in my CSS header? .header { padding: 60px; margin: 20px auto auto auto; width: 1400px; border-radius: 10px; text-align: center; background: # ...

Unusual CSS rendering hiccup

Using jQuery, I am manipulating the display of an <a> element. Depending on certain keypress events, it adds or removes a class from an <input> element (which controls the display) that is related as a sibling to the mentioned <a>. The i ...

Exploring the Possibilities of Manipulating HTML Tables with CSS

Looking for a solution to rearrange the layout of a html table with 2 cells in a row? Want to make the second cell appear below the first one instead of next to it using only CSS? It may require a bit of a "dirty hack", but the desired outcome is still n ...

What is the best way to create an inline div that includes a background image and text

<div class="header_section"> <div class="icon"></div> example </div>​ .header_section{ background: #C2E1FF; height: 24px; line-height: 24px; padding: 5px; } .icon{ background: url(http://mcgrefer.com/ ...

Explain the concept of grid layout in CSS

Can you please clarify the distinctions between grid and liquid layouts? Specifically, I am interested in understanding the concept of a grid layout. Thank you in advance for your explanation. ...

Modifying CSS stylesheet does not alter the background color

body { background-color: bisque; } <!DOCTYPE html> <html> <head> <title>Reading</title> </head> <body> <h1> <button><a href="index.html">Home</a></button> & ...

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

As I was going through the CKEditor tutorial, I implemented the following: $( '#editor' ).ckeditor(function(){}); //it's working great!! However, after submitting the form, I noticed that by default, the textarea displays <p></p ...

What is the best way to create a scrollable tbody in an HTML table using React?

In my current project, I am using React, Node, Express, and Postgres to fetch data from a database. The issue I'm facing involves creating a scrollable table within a div that spans the entire screen width. Initially, I had to apply display: block to ...

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

Emphasize the content within the table cell

Currently, I am working with an HTML table that is being generated by Java. My goal is to highlight the text within a table cell without changing the background color of the entire cell. I should mention that I am aware of the option to achieve this by ma ...

What is the best way to customize the cursor for each individual div?

Can you alter the cursor from a pointer to "not-allowed" within the div or GridList element in ReactJS or Material UI? ...

Looking to showcase website HTML code by simply clicking on a banner image?

I am looking to implement a feature where banner HTML code is displayed in a popup on website when the banner is clicked. For instance, an example of a banner could be: <img src="https://myweb.com/images/banners/1.gif"> Upon clicking the banner im ...

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...