Center-align an input and button vertically within a div

I am facing an issue with aligning my search setup vertically inside a div

Below is the code I have written:

HTML:

<div class="search">
<input class="searchfield" type="text" placeholder="Search..." value="" />&nbsp;<button class="searchbutton">SEARCH</button>
</div>

CSS:

.search{
padding: 0 10px;
font-size: 0.8em;
float: right;
height: 100%;
display: table;
vertical-align: middle;
}

.searchfield{
display: table-cell;
}

.searchbutton{
display: table-cell;
}

Can someone help me figure out what mistake I am making?

htmlcssvertical-alignment

Answer №1

Make sure to include a line-height that matches your font size.

.search{
  padding: 0 10px;
  font-size: 0.8em;
  **line-height: 0.8em;**
  float: right;
  height: 100%;
  display: table;
  vertical-align: middle;
}

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

How can I ensure the end of the list is clearly visible?

I'm experiencing an issue where the last element in my list is getting cut off. When I check the console logs, I can see that it's rendering properly. If I remove the 'position: fixed' style, I can see the element at the bottom of the l ...

cssreactjstypescript

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

cssgoogle-chromefirefoxselect

How can the checkers code be corrected due to a mistake?

Designed a simple game where the objective is to clear all the pieces by jumping over the checkers. However, encountering an error when attempting to remove the checker for the second time. Uncaught TypeError: Cannot read property 'theRow' of u ...

javascripthtmlhtml5-canvas

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

I need to construct a table dynamically based on the results returned from SQL. In this scenario, populating the table with the start time, end time, and user is straightforward: var StartTime = document.createElement('td'); var EndTime = docume ...

javascripthtmlangularjs

Customizing Bootstrap Modal's backdrop CSS for a specific element

Upon opening a bootstrap modal, the background takes on a darker shade as seen here. I am looking to apply a CSS class that mimics this shading effect to a specific element. I prefer not to use any JavaScript for this task as it is purely about styling wi ...

csstwitter-bootstrapbootstrap-modal

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

javascripthtmlgoogle-maps

Unable to locate the tag using .find() function following the use of .attr() method

I am currently utilizing jQuery in conjunction with node-horseman to interact with a specific page. My approach involves referencing the page's data-id attribute, which I then pass to my application to search for the li element containing this attribu ...

javascriptjqueryhtml

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...

jquerycss

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

javascriptjqueryhtmlsearch

Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

After researching the /deep/ and ::shadow selectors, I've come across conflicting information. In a discussion on Stack Overflow: What do /deep/ and ::shadow mean in a CSS selector? It was noted that Chrome has deprecated the /deep/ combinator and i ...

cssangularcss-selectors

What is the secret behind Redactor JS's ability to display properly indented code snippets?

If you take a look at the Redactor JS demo and click on the button to show the HTML source code of the displayed content... ...you will notice that the code is properly indented: Most rich text editors or wysiwyg editors typically display code in a singl ...

javascriptjquerycsswysiwygredactor

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Whenever I am trying to load a CSS file via AJAX from my dreamhost account, I encounter the error message that says No 'Access-Control-Allow-Origin' header is present on the requested resource. After searching for solutions online, I stumbled upo ...

cssajax.htaccess

Arranging Div Elements in a Specific Layout

I am currently experimenting with http://jsfiddle.net/ngZdg/ My main goal is to create a parallax website, but I am facing some challenges with the initial layout. I am aiming for the following design: ------------------------------------- | ...

htmlcss

Hide the background when the modal appears

I have successfully implemented a jQuery CustomBox modal on my website. However, I am facing an issue with hiding the content div behind the modal once it pops up. My goal is to make the content div reappear after the modal has been closed. You can view a ...

javascriptjqueryhtmlcssmodal-dialog

Develop a custom dropdown menu using JavaScript

I've been working on creating a dropdown menu that appears after selecting an option from another dropdown menu. Here's the HTML code I'm using: <br> <select id ="select-container" onchange="addSelect('select-container') ...

javascripthtml

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

javascriptcsshtml

What is the correct way to display or hide a button based on my specific situation?

Creating a 'show more' button for my app has presented me with a challenge. I am using a directive to handle actions when the user clicks on the read more button: (function(window, angular) { var app = angular.module('myApp'); ...

javascripthtmlangularjs

How can you position the nav collapse toggle to the far right while still allowing it to collapse downwards on smaller devices with Bootstrap 5?

I am in need of a navigation section that is always visible on all devices, with a collapsible toggle aligned to the right. In Bootstrap 5.2, if I place the collapse toggle after the <div class="collapse navbar-collapse ..., the collapsible conten ...

htmlcssnavbarbootstrap-5markup

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11

Ways to remove unwanted line breaks following PHP code within HTML documents

Currently working on building my blog, and I'm facing some challenges with the post div. It seems like every element within is automatically getting line breaks. Despite trying to float them or adjust padding, it's not giving me the desired layou ...

phphtmlcssline-breaks