Aligning a button to the center - html

I have a simple submit button. I am wanting to align it to the center. Here is my code:
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">
However, it does not work. What is the best/easiest way to do this?

You should use something like this:
<div style="text-align:center">
<input type="submit" />
</div>
Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.
<input type="submit" style="width: 300px; margin: 0 auto;" />

Here is what worked for me:
<input type="submit" style="margin-left: 50%">
If you only add margin, without the left part, it will center the submit button into the middle of your entire page, making it difficult to find and rendering your form incomplete for people who don't have the patience to find a submit button lol. margin-left centers it within the same line, so it's not further down your page than you intended.
You can also use pixels instead of percentage if you just want to indent the submit button a bit and not all the way halfway across the page.

For me it worked using flexbox, which is in my opinion the cleanest solution.
Add a css class around the parent div / element with :
.parent {
display: flex;
}
and for the button use:
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
If this is not working, try :
#wrapper {
display:flex;
justify-content: center;
}

margin: 50%;
You can adjust the percentage as needed. It seems to work for me in responsive emails.

Add width:100px, margin:50%.
Now the left side of the button is set to the center.
Finally add half of the width of the button in our case 50px.
The middle of the button is in the center.
<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>

Related

How to remove the last empty space in css flex

I am using css flex on my project but it adds an empty box at the end of the items. How do I remove it?
My code
<div className="form-horizontal">
<div className="form-control">
<label htmlFor="">Name</label>
<input type="text" name="" id="" />
</div>
<div className="form-control">
<label htmlFor="">Email</label>
<input type="text" name="" id="" />
</div>
</div>
CSS
.form-horizontal{
display: flex;
width: 100%;
white-space: pre-wrap;
flex-wrap: wrap;
}
Try this. This should solve your problem
.form-control {
width: 100%;
}
Well the display: flex; will make your child elements inside them have a display of inline, so they will stick to each other, unless you separate them with justify-content or align-items.
Now if you have 2 elements (the child's elements) which their combined width is still less than the width of container box (parent element), well the rest of width missing is still there, just that it's not being used! (Because you need to maintain the aspect/design of the page)
But that doesn't means that you have a new box in your flex-blox. It's just free space, not being used.
Graphic explanation of the problem
Now you can still use that free space there with the justify-content or align items property, or you can add a new child element to the flex-blox!

Center aligning buttons text inside div dynamically?

Tried a lot of solutions I found, but nothing seems to work for me.
I want to center text inside button dynamiclly, no matter the width and height of the button, the text should always be in the center, I'm sure there's a good solution for this. I always find myself struggling with it.
<div class="gform_button">
<input type="submit" class="gform_button" value="Submit" />
</div>
Tried almost everything, I don't understand why the following code doesn't work:
.gform_button{
text-align: center;
vertical-align: middle;
}
If someone please can give me a good explanation of how it works and why the two above lines doesn't centering the text even thou it seems that this is their purpose. I always struggle with centering things.
Thanks in advance!
By default, text inside input[type='submit'] should always be center-aligned (vertically/horizontally). Double-check your styles, maybe you broke the margin/padding of your div/input element.
Please try this:
HTML:
<div class="gform">
<input type="submit" class="gform_button" value="Submit" />
</div>
css:
input.gform_button{ background-color:blue;color:white}
Also jsfiddle for you:
https://jsfiddle.net/bnhf5hg9/5/
<style type="text/css">
.gform_button{
text-align: center;
vertical-align: middle;
padding:3px;
}
</style>
<div>
<input type="submit" class="gform_button" value="Submit" />
</div>

Display buttons in the same line

I have a web application in which i have these two submit button inside a table
<input type="submit" value="Modifier" name="btn" style="display:inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />
I'd like that it be displayed in the same line but i have this result:
Why this happens? how can i fix my code to show the buttons in the same line?
I'd stay away from this method of css personally, just my preference this will mean that every submit button is exactly the same but what if you don't want this styling with every submit button. But then again that method is much better than doing css inside a HTML file
input[type=submit]{
}
You're better off giving the submit buttons a class called submit then you can pick and choose which submits you want to do you're styling for
<input type="submit" class="submit">
.submit{
float: left;
etc.
}
The main problem is your table column widths perhaps give them all a class and give them a width and/or height that meets your needs inside an external css file.
you may try this styling;
input[type="submit"] {
float: right
}
you may also try float left.
Though you could increase the width of the table column or use display: inline-block, maybe you want to do something else:
Increaseing table/column width seems natural, as the two buttons look too wide to fit into that.
Once you have it, you may prefer to use something like block display with a float component.
The inline-block performs poorly in Internet Explorer browsers, even in recent versions like IE9, and a lot of your visitors will be using it for a while.
input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
You can try like this
Define a css rules for your submit buttons
input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}
here is an example.. uses bootstrap though
http://jsfiddle.net/QYBHm/
<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>
Sign up
or
Sign in
Increase your column size if not auto and add float:left to "Exporter"
In your table row in column with the buttons try this code
<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>
I would say that the container column isn't wide enough, so even too they are inline they appear like this. Try changing the width of that column to check if that's the problem.
Try this css
input[type=submit] {
display: inline-block;
float: left;
width: /*adjust as per your table */;
}

text-align: right has margin or buffer in Chrome

I'm trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what's really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.
It's not ideal for a large form, but for what I need, it looks better that way.
Here's the HTML and CSS (also at this jsfiddle):
HTML:
<div id="pullthrough-control-panel">
<div class="float-l right-text" id="pullthrough-range-panel">
<h3 class="center-text">Date Range</h3>
Start: <input type="text" name="rangestart" />
<br />
End: <input type="text" name="rangeend" />
</div>
</div>
CSS:
.float-l{
float: left;
}
.right-text{
text-align: right;
}
.center-text{
text-align: center;
}
#pullthrough-control-panel{
height: 6em;
padding: .25em;
}
That's it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input ("End") juts out to the right of the upper one. There's no reason this should be happening.
If you have both browsers, you can check it out at the jsfiddle I posted above.
Is this a bug in Chrome's CSS engine? Is there something happening that I'm not aware of?
you can simply change <br/> to <p> and it will work.
http://jsfiddle.net/Jd7PR/
You're doing it all fine, just move the <br /> in the upper line without spaces after the input:
Start: <input type="text" name="rangestart" /><br />
End: <input type="text" name="rangeend" />
jsFiddle demo
That's it!
Here's my demo for you. Seems like chrome didn't like the </br>
DEMO
Do you need to have both a class and an id on one div? (I don't want to say you shouldn't because I'm not sure about that, but I haven't encountered that before)
You could give each input a class/id and then set the css for that class/id as: float:right; - Alternatively you could use position:absolute; - Personally, I would put both pairs in parent divs and use display:inline; and float:right; on the parent divs.

Creating a custom html button with background Image and Text

I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.