Looking for equal margins on top and bottom? Here's how to achieve it:
If you have a container div like this:
<div id="search">
<input id="txtSearch" type="txt">
</div>
Your CSS should look something like this:
#search{
min-width: 25%;
}
#txtSearch{
display: block;
width: 80%;
height: 60%;
margin: 0 auto;
}
To see the code in action, check out my JSFIDDLE link.
The #txtSearch selector in the JSFiddle demonstration you provided is missing the declaration margin: 0 auto. Including this will center the input element as intended:
#txtSearch {
...
margin: 0 auto;
}
View the updated JSFiddle demo here.
Update (as per comments)
However, now the input still appears at the top, when it should have equal spacing at the top and bottom.
To achieve this, I recommend using a table display for the header element, along with a table-cell display for its children, with a vertical-align property set to "middle":
#header {
display: table;
}
#header a, #header a:link, #header a:visited, #header a:active, #header div {
display: table-cell;
vertical-align: middle;
}
I'm working on developing a simple gallery using JQuery. The main concept is to have all image files named x.png (where x is a number), and the program will then add a number to the current one, creating x+1.png and so forth. Here's the code I ...
My tables are causing a horizontal scroll bar to appear when converted to Bootstrap data tables. Adding the "p-3" class to the table's div for padding eliminates the scroll bar but also narrows the table. Is there a solution to removing the scroll b ...
Greetings! I am currently working on my website www.acigaiabeta.esy.es and I am facing an issue with aligning the images of the carousel to the center vertically. Despite trying various solutions, such as following tips from this resource, the images remai ...
I am dynamically adding HTML elements during runtime using an AJAX call from a JavaScript file. Currently, I am attempting to use a combo box drop-down element to display a list of data. Here is how I am trying to achieve this in my script: $("#myList") ...
I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...
Is there a way to replace the asterisks with a blank ("") in the innerHTML using JavaScript? I've attempted this method: document.getElementById("lab").innerHTML = document.getElementById("lab").innerHTML.replace(/*/g, ''); I also ...
Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...
There seems to be a minor issue with the height of the portfolio container divs at specific window widths. The problematic widths range from 1025 to 1041 and from 768 to 784. To visualize this, try resizing your browser window to these dimensions on the fo ...
Recently, I integrated a php form into my html code and changed the file from index.html to index.php. The contact form is functioning perfectly and sending all information as expected. However, after submitting the form, users are receiving the message "T ...
Currently, I am a student focusing on honing my skills by working on an app for a blog post. To kickstart my project, I downloaded the "clean-blog" template from the startbootstrap website. If you are interested, here is the link to the template: My curr ...
After setting the width and height for an image, along with testing overflow:hidden, I've encountered an issue where the alt text for a broken image overflows the bounds of the image and the image size is lost. How can I contain the alt text within th ...
I am currently working on developing a login page that includes two tabs - one for logging in and another for registering. The login tab displays fields for username and password, while the register tab includes fields for name, last name, and email. I h ...
Exploring HTML once again, I'm currently working on creating a 2 column layout that doesn't rely on floats in order to maintain the natural document flow. Most solutions I've come across involve floats or tables, which I want to avoid. I als ...
I'm currently implementing an autocomplete feature using the REST Countries web service. The goal is to provide suggestions as the user starts typing in an input field, and once a country is selected, display information about it. I am considering usi ...
After designing a form with four text fields and a submit button, my goal is to save the data into a JSON file upon submission. Additionally, I am looking for a way to display all of the JSON data on my webpage. ...
I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...
I have a website application that I created but it's currently empty. I would like to add some style to it using online free website templates that I downloaded. However, I'm unsure of how to incorporate the css, font, and images folders into the ...
I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...
I am working on a table that has three pictures in a row, with 100% width. I want the table to be responsive and stack the pictures into one column when the space is limited. The issue I am currently facing is that the elements of the table do not stack i ...
After browsing numerous topics on Stackoverflow, I was able to develop my own compact rich text editor. However, one issue I encountered is that when the mouse cursor hovers over already bold or styled text, it's difficult for me to identify the styl ...