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

Use ajax to load a webpage into a specific div, then reload the same div after submitting

I have a webpage that includes hyperlinks and a content area with an id of "contentarea" where the results from these hyperlinks are displayed. When a user clicks on the "Search" link, the page search.jsp loads, which contains a submit button and a form ...

ajaxjsphtml

Leverage PHP to retrieve information from a JSON file and integrate it into a dropdown menu on an HTML

I've been given a task to develop a PHP routine that will extract the ISO code and name from a geojson file for use in a dropdown list of countries on a website. This is completely new to me and I'm finding it difficult to understand the documen ...

phphtmlleafletgeojson

HTML - Selecting Different Values in One Drop Down Based on Another Drop Down

When selecting "First Year" in the initial drop-down menu, the options "Sem1" and "Sem2" should be displayed in the second drop-down menu. Similarly, when choosing "Second Year" in the first drop-down menu, the choices "Sem3" and "Sem4" should appear in th ...

javascriptphpjqueryhtml

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

javascriptjqueryhtmlcss

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

The Javascript function I created references a variable that seems to be undefined in the code

Recently, I discovered a function that is triggered with an onclick event using "openNav()" from an HTML element. Below is the code snippet for this function: function openNav() { document.getElementById("nav-drawer").classList.add("nav-drawer-open"); ...

javascripthtmlvariables

Position the text on the left side while also centering it within my div

I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...

htmlcssalignment

Using JQuery to iterate through every unique div id in the HTML document

i am attempting to utilize jquery to iterate through each div tag that has an id of "rate". The goal is for jquery to execute a function on the individual divs. Here is my code snippet: information.html <html> <input class="rate" type="hidden ...

javascriptphpjqueryhtmlcss

Unable to precisely reach the very bottom of the scrollbar

When trying to move to the bottom of the scrollbar, I seem to reach a bit higher than the actual bottom. https://i.stack.imgur.com/Vt83t.png Here is my code: ws.onmessage = function (event) { var log = document.getElementById('log') ...

javascriptcss

Emphasize certain VueJS elements for focus

Currently, I am working with a Vue file and I'm interested in highlighting the active element. Can you recommend the most efficient method to achieve this? <li @click = "selectedComponent = 'appBugs1'"><i class="ion-bug"></i& ...

htmlvue.js

Unable to append item to document object model

Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...

javascripthtmlangulartypescript

Displaying truncated title text

Would it be feasible to display clipped text (overflow: hidden) in a way that is fully readable when hovered over? An attempt like this: div:hover { overflow: visible; background-color: yellow; } results in the text overlapping, making it impossible ...

htmlcsshoveroverflow

Tips for inserting a new row at the beginning of a table using the DataTable plugin

Currently, I am utilizing the DataTable.js plugin to showcase data in a table. Below is the code snippet that I am using to insert a new row into the table. var new_row = table.row.add({ "select": '<input type="checkbox" />&apos ...

jqueryhtmldatatable

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

javascriptcssdatatable

Using flexbox auto margin within nested elements: A guide

Is it possible to achieve consistent margins between the heading and list items using flexbox? section { display: flex; background: #eee; } h1 { background: #bbb; } ul { display: flex; flex: 1; list-style-type: none; background: #ccc; ...

cssflexbox

How can you combine accessibility with absolute positioning?

Have you seen our unique hamburger design? https://i.stack.imgur.com/AmT6P.png A simple click will reveal a neat popup (the class "open" is added to a div). https://i.stack.imgur.com/yPydJ.png This cool effect is achieved using fixed positioning, but i ...

htmlcssaccessibilitywcagwcag2.0

Using Javascript to Treat an HTML Document as a String

Check out the complete project on GitHub: https://github.com/sosophia10/TimeCapsule (refer to js/experience.js) I'm utilizing JQuery to develop "applications" for my website. I'm encountering a problem where I can't locate the correct synta ...

javascripthtmljquerydominnerhtml

What could be causing the issue with the 100% height and 100% width not functioning properly on my ASPX page?

The CSS and HTML code work perfectly in an isolated test environment: body, html { height: 100%; min-height:600px; min-width:800px; overflow:hidden; margin:0;padding:0; } html {overflow:auto;} .fill {height:100%; width:100%; backgro ...

htmlcssasp.net

Issue with LAMP Stack: HTML table updates are not syncing correctly with the database

Greetings, I am currently working on an HTML form called Index.html <html> <body> <form action="update.php" method="POST"> Department: <input type="text" name="department"><br><br> Subname: <input type="t ...

phphtmllamp