I'm having troubles centering my HTML form submit buttons in CSS.
Right now I'm using:
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
with this CSS content
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
And it's not doing anything. I know I'm probably doing something stupid wrong. How can I fix this?
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
i just wrapped a div around them and made it align center. then you don't need any css on the buttons to center them.
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder{ text-align: center; }
Input elements are inline by default. Add display:block to get the margins to apply. This will, however, break the buttons onto two separate lines. Use a wrapping <div> with text-align: center as suggested by others to get them on the same line.
I see a few answers here, most of them complicated or with some cons (additional divs, text-align doesn't work because of display: inline-block). I think this is the simplest and problem-free solution:
HTML:
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS:
table input[type="submit"] {
display: block;
margin: 0 auto;
}
Try this :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}
#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
This has 2 examples, you can use the one that fits best in your situation.
use text-align:center on the parent container, or create a container for this.
if the container has to have a fixed size, use auto left and right margins to center it in the parent container.
note that auto is used with single blocks to center them in the parent space by distrubuting the empty space to the left and right.
/* here is what works for me - set up as a class */
.button {
text-align: center;
display: block;
margin: 0 auto;
}
/* you can set padding and width to whatever works best */
<style>
form div {
width: 400px;
border: 1px solid black;
}
form input[type='submit'] {
display: inline-block;
width: 70px;
}
div.submitWrapper {
text-align: center;
}
</style>
<form>
<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>
Also Check this jsfiddle
I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':
CSS:
#centerbuttons{
width:250px;
margin:0 auto;
}
HTML (after removing the margin properties from your buttons' CSS):
<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
If you want to take it to the next level, use flexbox:
.form {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
gap: 1em;
}
#btn_s {
width: 100px;
}
#btn_i {
width: 125px;
}
<div class="form">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
Guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One simple solution if only one button needs to be centered is something like:
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
Although I've used an inline example, for production, the code should be placed in a CSS file using a class.
You can do it with text-align: center.
.form-1 {
text-align: center;
}
#btn_s {
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
<div class="form-1">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
Buttons are by default an inline-block style element. They will not respond to auto. You have to indicate a specific number.
button {
margin: 6px 50px;
}
(I prefer percentages, they seem to work better)
If, in the case, it must respond to margin: auto, you have to change it to be a block element.
button {
display: block;
margin: 6px auto;
}
Related
I am trying to design Google search page and facing some problems.
I have completed almost every thing but got stuck in aligning "Google Search" button and "I am feeling Lucky button" in line and in center below search bar.
Below is my HTML and CSS for entire layout.
body,a{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px;
margin: 5px;
text-align: center;
}
.i{
margin-left: auto;
margin-right: auto;
margin-top: 135px;
}
nav{
text-align: right;
padding-top: 5px;
}
.sb input{
border-radius: 25px ;
border: 0.5px solid ;
height: 40px;
width: 480px;
}
.foo{
font-size: medium;
padding-left: 40px;
padding-right: 40px;
}
<nav>
<div>
Google Image Search
Advance Search
</div>
</nav>
<img src="image.png" class="i">
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="gs">
<input type="submit" value="Google Search">
</div>
</form>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
Here is my output: http://jsfiddle.net/zqwmogvd/#&togetherjs=Rd6Qeg60cd
Here is how I would do it. I would wrap the two buttons in a parent div with a classname buttons-wrap or any class name of my choosing:
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="buttons-wrap">
<div class="gs">
<input type="submit" value="Google Search">
</div>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
</div>
</form>
I would then reference the .buttons-wrap class in CSS and use flexbox to center it:
.buttons-wrap {
display: flex;
justify-content: center;
margin-top: 3px;
}
If you don't know flexbox, you can also use the following:
.buttons-wrap>div {
display: inline-block;
margin-top: 3px
}
> selects the children elements.
.button-wrap {
display: flex;
justify-content:center;
margin-top:10px
}
flex is the value of css display. By using display:flex in parent elements, child elements automatically align like columns or rows with auto width and auto height.
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container.
I'm trying to make a login form, and I can't figure out how to put an image in with the placeholder. The current code I have is
<span class="material-icons" style="font-size:20px; color: gray; float: left;">person
<input placeholder="username" type="text">lock
</span>
<span class="material-icons" style="font-size:24px; color: gray; float: left;">lock
<input placeholder="Password" type="text">
</span>
...But none of that has worked to do what I need.
I would like the image to be inside of the input, not in front of it.
Try using this code
It will show an image as a placeholder in the text field, and it will hide when you click on the text field.
input#search {
background-image: url('https://cdn0.iconfinder.com/data/icons/very-basic-2-android-l-lollipop-icon-pack/24/search-512.png');
background-size:contain;
background-repeat: no-repeat;
text-indent: 20px;
/* Extra Styling */
padding: 5px 3px;
transition:0.3s;
}
input#search:focus {
background-image:none;
text-indent:0px
}
<input type="text" id="search" name="search" Placeholder="Search" />
Just use the background property with class in your CSS.
<html>
<head>
<title></title>
<style type="text/css" media="screen">
input.test{
padding: .5em;
}
input.icon[value="SEARCH WORDS"]{
padding-left:48px;
background:
url(https://material.io/icons/static/images/icons-180x180.png) no-repeat 8px center;
}
</style>
</head>
<body>
<input class="icon" value="NOT SEARCH WORDS">
<input class="icon" value="SEARCH WORDS">
</body>
hope that helps
I recently designed a webpage, I am not a web developer, so I collected pieces and bits from various locations and kinda stitched them up.
Now, the page is fully designed and works in firefox, chrome and IE.
But it does not work on Safari.
Here is the code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 100%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.windowContent
{
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 80%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 50%;
background-color: #9CAFFF;
color: white;
padding: 6px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
}
</style>
</head>
<body onload="GenerateEmotion()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_2">
<div class="floating-box">Sally heard a knock on the door.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_3">
<div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
</div>
<br>
<input type="submit" value="I have completed a story">
</form>
<script>
function GenerateEmotion(){
var emotion = "";
var raw = Math.random();
var final = Math.ceil(raw * 4);
if (final == 1)
document.getElementById("emotion").value = "Happy";
else if (final == 2)
document.getElementById("emotion").value = "Sad";
else if (final == 3)
document.getElementById("emotion").value = "Angry";
else if (final == 4)
document.getElementById("emotion").value = "Surprise";
}
</script>
</div>
</div>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>Emotionalize it!</b></font></p>
<p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
<p><font size="5"><b> Rules of the game </b></font></p>
<font size="3">
<p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
<p>Your goal is to make your audience experience the emotion written on the left top. </p>
<p>We are helping you to maintain the flow, you just need to connect the dots!</p>
<p>As your story will be fed to a giant computer program, so can you:</p>
<ul>
<li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
<li>Please do not use pronouns. Use the name - John instead of 'him'</li>
<li>Please use the past tense and active voice.</li>
<li>Please make sure to include events from the beginning to the end.</li>
<li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
<li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
<li>Your audiance should experience the said emotion</li>
</ul>
</font>
</div>
</div>
</div>
</body>
</html>
Specifically, what does not work:
button click to 'add new sentences'
submit
Is there any error: No, nothing happens after touch-clicking the button
What I am looking out for:
If you web developer guys can figure out why it does not work on Safari, it would be great help.
How to change that part, so functionality remains the same, but it works on safari
As I am already asking this question, another side question would help. can I know how to fix the scrollbar at the bottom?
PS_1: If you don't feel like copy pasting this code, it is in working condition here
PS_2: WHen I say safari, I mean the one on the iPhone
Try moving the "Emotion" input text box outside of the "dynamicInput_1" div. So, instead of:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Try:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div id="dynamicInput_1">
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Also, take a look at this explanation of the use of id and class: div class vs id
You've got several divs using the same id. ids should be unique.
I'm not sure what you mean about fixing the scrollbar at the bottom, so I haven't addressed that question.
Do you have the javascript turned on in Safari?
Desktop: https://support.ezimerchant.com/hc/en-us/articles/200836150-How-do-I-enable-cookies-and-JavaScript-in-Safari-Mac-
Mobile: https://www.whatismybrowser.com/guides/how-to-enable-javascript/safari-iphone-ipod
Hi guys all the css works for all the calculations, for add, mult, sub, div but when I display all of it, how would I change the CSS to change it to a bigger box on that click of the button called "display all". if you see my CSS code for my display block #answers it only fits for the single number value, but how would I adjust the CSS so it can change the width and height when a user calculates much larger numbers, or display all?
this is the code here
<html>
<body>
<style><?php include "style.css" ?></style>
<form action="index.php" method="POST">
<table border="1">
<td>
<p>insert value one: <input type="text" name="num1"> <br>
<p>insert value two: <input type="text" name="num2"> <br>
</td>
<td>
<input type="submit" name="add" value="Addition">
<input type="submit" name="sub" value="Subtraction">
<input type="submit" name="mult" value="Multiplication">
<input type="submit" name="div" value="Division">
<input type="submit" name="all" value="Display All">
</td>
</table>
</form>
<div id="answers">
<?php
if (isset($_POST['num1']) && ($_POST['num2'])){
$val1 = $_POST['num1'];
$val2 = $_POST['num2'];
$add = $val1+$val2;
$sub = $val1-$val2;
$mult = $val1*$val2;
$div = $val1/$val2;
}
if (isset($_POST['add'])){
echo $add;
}
if (isset($_POST['sub'])){
echo $sub;
}
if (isset($_POST['mult'])){
echo $mult;
}
if (isset($_POST['div'])){
echo $div;
}
if (isset($_POST['all'])){
echo $add . "<br>" . $sub . "<br>" . $mult . "<br>" . $div . "<br>";
}
?>
</div>
</body>
</html>
and my CSS
body{
background-color:#f0f0f0;
}
table{
margin:50px auto;
background-color: tan;
border: 2px solid black;
}
#answers{
margin:10px auto;
width: 100px;
height:30px;
background-color: tan;
text-align:center;
line-height:30px;
border: solid black 1px;
}
Another option is to set the #answers to display: table-cell and to create a wrapper div around it to display: table
For example:
// CSS
#answers{
margin: 10px auto;
width: 100px;
padding: 0 10px;
display: table-cell;
background-color: tan;
text-align: center;
line-height: 30px;
border: solid black 1px;
}
.answers-wrapper {
margin: 0 auto;
text-align: center;
display: table;
}
// HTML
<div class="answers-wrapper">
<div id="answers">
<?php?>
</div>
</div>
This should allow the tan box to expand when your number grows bigger.
Instead of width (see note below) and height, you can try using min-width and min-height to make your box expand according to its content but never below the specified minimum values.
Here you can see a couple of examples with min-height only: http://jsfiddle.net/tv598/
Note that the display: block (which is the default for divs) sets the width to 100% by default, and although you can use display: inline-block; instead, it will cause your divs to appear inline and you also won't be able to center is using the auto margins.
I have a page that looks like this:
<body>
<div class="pollid" >
<select class="pollid" id="pollid" size="[2]" >
[options]
</select></div>
<div class="seperator"></div>
<div class="options">
<select class="options" id="options" disabled="disabled" size="2">
<option id="deadoption">Select a poll to enable this box.</option>
</select></div>
<div class="seperator"></div>
<div class="options2" id="options2">
</div>
</body>
I also have a bit of jquery that just does this when a specific option in the second div is selected:
$("#options2").load("ajax/newOption.html");
And newOption.html looks like this:
<input type="text" id="newopt" label="Option: " />
<button id="submit" type="button" value="Submit" />
The CSS I have looks like this:
select {
height: 100%;
width: 100%;
}
div.pollid {
height: 100%;
width: 30%;
display: inline-block;
}
div.options {
height: 100%;
width: 30%;
display: inline-block;
}
div.options2 {
height: 100%;
width: 30%;
display: inline-block;
}
.seperator {
height: 100%;
width: 3%;
display: inline-block;
}
Now, this works. However, when I click the option that loads that page, the div jumps down so that the bottom of the input is at the bottom of my screen. This is not what I want. I want the div to stay where it is, taking up 30% of the screen. I don't want the screen to scroll at all, which it does once the html is loaded. How might I be able to fix this?
I found the solution after experimenting. It looks like, for some reason, putting anything in any of these divs other than the <select size="x>1"> makes it jump down, and giving them the property vertical-align:top fixes that.