Achieving Vertically Centered Buttons with CSS

Trying to center-align a simple input button within a table cell has been quite the challenge.

The following is the current markup:

<table width="500" border="1">
  <tr>
    <td width="390">XXXXXXXXX</td>
    <td width="110" rowspan="2" valign="middle"><input type="button" value="submit"></td>
  </tr>
  <tr>
    <td>YYYYYYYY</td>
  </tr>
</table>
<br /><br />
<div style="width:500px;">
  <div style="float:left;width:390px;">
    <div>XXXXXXX</div>
    <div>YYYYYYY</div>
  </div>
  <div style="vertical-align:middle;width:110px;float:right;">
    <div><input type="button" value="submit"></div>
  </div>
</div>

An illustration of the desired layout can be seen in the table version. Keep in mind that the text represented by "XXXXX" or "YYYYYY" can vary in length.

htmlcsslayout

Answer №1

http://jsfiddle.net/8v8gLn4y/

.container {
  background: lightblue;
  display: table;
  width:100%;
}
        
input[type=button] {    
  display: block;
  width: 50%;
  margin: 0 auto;
}
        
.button-wrapper {
  background: darkorange;
  display: table-cell;
  vertical-align: middle;
}
<div class='container'>
    
  <div>some line with text</div>
  <div>another line with text</div>    
    
  <div class='button-wrapper'>
    <input type="button" value="submit"  />
  </div>
    
</div>

update 2016:
flexbox 

.container {
  background: bisque;
  display: flex;
  width: 100%;
}

.container>div {
  flex-grow: 1;
}

.button-wrapper {
  background: chocolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

input[type=button] {
  display: block;
  width: 50%;
  margin: 0 auto;
  flex-shrink: 1;
}
<div class='container'>

  <div>
    <p>some line with text</p>
    <p>another line with text</p>
  </div>

  <div class='button-wrapper'>
    <input type="button" value="submit" />
  </div>

</div>

Answer №2

To ensure your button is centered, you can make it an inline element and apply text-align: center to the parent td.

.tools {
  text-align: center;
}

.submit {
  display: inline;
}
<table width="500" border="1">
  <tr>
    <td width="390">XXXXXXXXX</td>
    <td class="tools" width="110" rowspan="2" valign="middle"><input class- "submit" type="button" value="submit"></td>
  </tr>
  <tr>
    <td>YYYYYYYY</td>
  </tr>
</table>
<br /><br />
<div style="width:500px;">
  <div style="float:left;width:390px;">
    <div>XXXXXXX</div>
    <div>YYYYYYY</div>
  </div>
  <div style="vertical-align:middle;width:110px;float:right;">
    <div><input type="button" value="submit"></div>
  </div>
</div>

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

Adjust the height of the following column to match the responsive height of the initial column

Those who have marked it as duplicate, I want to clarify that my question is not about making Bootstrap columns all the same height. Instead, I am focusing on responsive images while maintaining their aspect ratio, which is a different issue from simply en ...

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design

Redirecting to the personalized 404 error page

I searched high and low for a simple answer to my question, but came up empty. I currently have two additional websites, website 'A' and website 'B', within the structure of my main website (www.xyz.com). Each of these websites is locat ...

html.htaccess

What is the purpose of setting the image border to inline block?

When I added a span element as the circular border to my image, which is placed inside a span tag, I observed that the span tag was being pushed down. By giving the span a display:inline-block property, the issue was resolved. But why does this happen? ...

htmlcss

Bootstrap not functioning properly in selecting gallery items

Looking for some help with my website's gallery page development. I've included the HTML and JavaScript files below. However, I seem to be missing a selector ID as none of the pictures are changing and the categories aren't working. Any help ...

javascripthtmlcssbootstrap-4selector

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

Is it possible for a CSS Transition/Transform to ease out smoothly yet not ease in at all?

It appears that the transition is smoother when I stop hovering over the button, compared to when I actually hover. Why might this be? .button_1 { border-width: 0.8px; border-color: Lightgray; background-color: hsla(209, 72%, 59%, 0.85); ...

htmlcss

Browsing through the HTML element: receiving a higher number of iterations than initially anticipated

Currently, I am utilizing a Google Web App to construct a web user form with a table containing 10 dropdown lists (select elements). Upon clicking a button, I have implemented a code that loops through all the "select" HTML elements (initially debugging w ...

javascripthtmlgoogle-apps-script

Bringing audio to life in a dynamic AJAX chat environment

In my AJAX chat, I am utilizing the Audio class to play a sound when a new message is received. Below is my code snippet: if ( ! $.browser.msie || ( $.browser.msie && parseFloat(jQuery.browser.version) >= 9 ) ) { //var notif = new Audio(&apo ...

ajaxhtmlaudiochat

Python: Change text within HTML content rather than the HTML tags

Looking for help with converting HTML code? <pre class="script">template("main/GlobalShared");</pre> <pre class="script"> var link = '/Draft/Tracker_1.1'; if (wiki.pageexists(link)) { &lt;div class="version"&gt; web ...

pythonhtmlregexmindtouch

The footer content and social media icons are not visible

I've been working on a multi-column website and I'm almost done, but I've encountered an issue - the footer text at the bottom of the page and the social media icon are not showing up. Even when I tried viewing the page without the linked CS ...

htmlcss

Blog HTML Editing Tool

Apologies for the simple question. I'm struggling to find the right plugin for blog writing that allows users to edit fonts and add images. I also need the ability to submit the generated HTML code into MySQL. Can anyone offer assistance with this pro ...

htmlmysqlpluginseditor

Exploring the wonders of CSS with Socialchef

Hey, I recently came across a solution on Stack Overflow where they provided code for SocialChef to convert decimal inputs into fractions. I'm wondering how I can write or incorporate some code to input fractions and mantissa as a fraction... I ...

phpcss

Selecting a navigation tab will change the displayed div, refresh the content, and set a default tab selection

Hey there, I'm diving into the world of ASP and CSS concepts and have run into a basic problem. My navigation bar currently looks like this: <li><a href="#Div1">Division 1</a></li><br> <li><a href="#Div2">Div ...

jquerycssasp.net

Implementing translation text into a PHP database

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Translate and Save Text</title> </head> <body> <form action="" method="post" name="theform"> <table width="693" border="1" style="table-l ...

javascriptphphtmlmysqlgoogle-translate

Expand Bootstrap accordion on hover

I have tried several examples that I discovered on Google and Stack Overflow, but none of them seem to work. So, I decided to attempt a different solution for opening the Bootstrap accordion on hover, however, it is not working as expected. Do you have any ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way I can put together this CSS code?

I am currently using Socialengine (Zend Framework) along with several plugins. However, one of the plugins has its own unique CSS style. There are multiple CSS cascades in use, but they are not less or sass files. The contents of my file style.css are as ...

phpcsscompilationsassless

The tab-width property in CSS allows you to specify the

Are there methods in WebKit and Microsoft browsers to specify tab width as in Firefox and Opera with -moz-tab-size and -o-tab-size properties? For instance, I would like the tabs in my <textarea> to be 4 spaces wide: textarea { -moz-tab-size: 4 ...

csstabscross-browser

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

cssvue.js

Why isn't the CSS selector `:host > some_child_element` working as expected?

I have this unique custom element structure: <my-custom-form> #shadow-root <style> :host label { color: red; } </style> <div id="wrapper"> <slot name="form-label"></slot ...

cssweb-componentshadow-dom

What is the most effective method for incorporating a floating section next to a Susy gallery?

Check out my latest progress on the codepen here The number of items displayed in the gallery is dynamic based on search results. However, I am looking to add a fixed area to the right side that remains visible as the user scrolls through the gallery. Ess ...

htmlcsssasscompass-sasssusy