Button alignment vertically is not functioning

Here is a snippet of HTML code:

<header>
   <div class='content'>
      <div class='pull-left'>
        <h1>Hello World</h1>
        <h2>Lorem ipsum</h2>
      </div>

      <div class='pull-right'>
        <a href='#'>
          <button class='edit'>Edit Book</button>
        </a>
      </div>
  </div>
</header>

The h1 element will always be present, but the h2 element is optional and can affect the dynamic height. The goal is to vertically align the "Edit Book" button so that it appears in the middle of the .content container. Attempting to use vertical-align:center on the button has not been successful.

For reference, here is a link to the JSFiddle: http://jsfiddle.net/v8SfN/

htmlcss

Answer №1

Instead of relying on bootstrap's pre-defined classes, you have the option to take a slightly different approach:

Check out the Demo Here

Here is the HTML code snippet:

<header>
    <div class='layout-valign'>
        <div>
             <h1>Hello World</h1>    
             <h2>Lorem ipsum</h2>    
        </div>
        <div> <a href='#'>
          <button class='edit'>Edit Book</button>
        </a>    
        </div>
    </div>
</header>

And here is the CSS code snippet:

.layout-valign {
    display:table;
    width:100%;
}
.layout-valign>div {
    display:table-cell;
    vertical-align:middle;
}
.layout-valign>div:last-child {
    text-align:right;
}

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

Ways to align elements vertically in a container without using flexbox?

I am working with a ul element that has a height of 270px and contains 10 li elements. My goal is to have all the li elements vertically justified, meaning the top and bottom li elements should touch the container's top and bottom respectively, while ...

htmlcssflexbox

Creating formatted code blocks within my HTML document

I'm currently working on achieving this layout in my HTML: https://i.stack.imgur.com/2LEQO.png Here is the JSFiddle link: https://jsfiddle.net/cr9vkc7f/4/ I attempted to add a border to the left of my code snippet as shown below: border-left: 1px ...

htmlcsstwitter-bootstrap

Click on the <a> tag to submit the form

I currently have: <ul> <form name="myform" action="Users" id="myform" method="post"> <li><a id="target" name="target" value='A' href="#">A</a></li> <li><a id="target" name="target" value=&ap ...

javascriptasp.nethtml

Can you explain the variance between using @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS?

Can someone explain the difference between using @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS? When I tested them separately in my code, they seemed to have the same outcome. @media and screen (max-width: 1000px) { .grid ...

htmlcssmedia-queries

Exploring Ancestors with Jquery to Find Input Fields

In my current project, I am working on a function that needs to extract the values from two input fields within a specific div element. These values will then be added to an array and posted as JSON data. However, I am facing difficulties in navigating thr ...

javascriptjavajqueryhtml

Is it possible to modify the color of a bootstrap navbar dropdown upon clicking?

I am having trouble changing the color of a bootstrap navbar dropdown link when it is clicked. Currently, the color changes to teal for a moment but then reverts back to the default gray. Here is my current CSS: li.dropdown:active { background- ...

csstwitter-bootstrap

The font size in the Android Chrome browser appears different when switched between portrait and landscape modes

I have uploaded a screenshot here, but I am puzzled as to why the font size appears differently on the Android browser in portrait and landscape modes. $(document).ready(function(e) { var x=$(".main").css("font-size"); alert(x) }); .main{ font-size: ...

jquerycsshtml

Leverage Angular's directives to incorporate HTML elements into your project

I am trying to integrate the HTML code from a file called protocol-modal.html into my main HTML file as a directive: <div class="modal-content"> <form class="form-horizontal" role="form" name="questionForm"> <div class="modal-heade ...

htmlangularjsangularjs-directive

What is the process for integrating the toastr-rails gem into a Rails 6 project?

Hey guys, I've been struggling to integrate the toastr gem into my Rails 6 project where I already have the devise gem set up. My main roadblock seems to be understanding webpacker and how to make toastr-rails webpacker friendly. Despite going throu ...

cssruby-on-railsbootstrap-4toastrruby-on-rails-6

Encircle the text within intersecting divs

I am facing an issue with my main div that contains some text and 2 other overlapping divs. The text in the main div is getting overlapped by the other two divs. I need help to make the text in the main div wrap around the overlapping divs. It may sound s ...

javascripthtmlcssbootstrap-4frontend

Convert HTML table data to JSON format and customize cell values

Hey there, I have a HTML table that looks like this: <table id="people" border="1"> <thead> <tr> <th>Name</th> <th>Places</th> <th>Grade</th> </tr> & ...

javascriptjqueryhtmljsonhtml-table

The value of the input field in jQuery is not defined

I am encountering an issue with an error: jQuery input val() is undefined. I have 3 inputs that are all referencing one item. When I add a new row, I can create a new item (3 rows). All of these rows need to be organized in an array to be sent to a PHP f ...

javascripthtmljquery

What could be causing the unequal sizes of my flex children?

After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size. In the code provided, the parent element has a fixed height and width, while the children a ...

cssreactjstailwind-css

Display sibling element upon hovering with AngularJS

Within a single view, I have multiple instances of repeated content elements. Each content element contains an anchor element. My goal is to toggle a class on a sibling element within that specific content element when a user hovers over the anchor. For c ...

javascriptcssangularjs

What is the best way to make the colored box reach all the way to the edges?

.output-container { background: #333; color: #fff; padding: 1rem 1; width: 100%; top: 0; z-index: 1000; text-align: center; } https://i.sstatic.net/V0RSm2ft.png W ...

htmlcssbackground-color

Seeking assistance with creating a form that is centered on the page

As a newcomer here, I am in the process of learning new things. My current challenge is to create a center form. Here is what I have experimented with so far: <!doctype html> <html lang="en> <head> <meta charset="utf-8"> &l ...

htmlcssbootstrap-5

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

javascriptphpjqueryhtml

The headline is being improperly rendered inside a black box on Firefox

A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This oc ...

cssfirefoxpaddinghtml

jQuery script for reversing the collapse/expand feature

Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...

jquerycss

What exactly does this jquery library aim to achieve?

Recently, I discovered a new library for CSS3 animations. As someone who is still learning JavaScript, I am unsure of the benefits it offers. It appears to replicate what jQuery can already achieve but by utilizing CSS3. So, what advantage does using a to ...

jquerycssjquery-animatecss-transitions