Button not centered align in Safari browser only.
JSFIddle
HTML
<div class="" style=" width: 100%; ">
<input value="Button" class="center-block" type="submit" style=""/>
</div>
CSS
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
Above problem just come in Safari. In Chrome and Firefox it works fine.
if you don't set a width for btn:
parent - text-align: center
button child - use display:inline-block instead of display: block
.wrap {
text-align: center;
}
.center-block {
display: inline-block;
}
<div class="wrap">
<input value="Button" class="center-block" type="submit" />
</div>
Related
This question already has answers here:
CSS center display inline block?
(9 answers)
Closed 2 years ago.
I'm trying to center a pair of buttons within a form. These buttons are wrapped in <div> which has display: inline-block set against it so the <div> is only as wide as the buttons. The parent to the <div> which is a <form> element has fixed-width: 290px set against it.
However, on the <div>, when I set margin-left: auto; margin-right: auto, the <div> doesn't center itself within the <form>. I have even set display: block against the <form> element too to no avail.
What am I doing wrong?
HTML:
<form id="schemeForm">
<!--Other HTML elements-->
<div id="formButtons">
<input type="button" value="Back" />
<input type="submit" value="Submit" />
</div>
</form>
CSS:
#schemeForm {
width: 290px;
display: block;
}
#formButtons {
display: inline-block; /*to make it only as wide as buttons*/
margin-left: auto;
margin-right: auto;
}
Example Code Snippet:
#schemeForm {
width: 290px;
display: block;
background-color: black;
}
#formButtons {
display: inline-block; /*to make it only as wide as buttons*/
margin-left: auto;
margin-right: auto;
background-color: orange;
}
<html>
<body>
<form id="schemeForm">
<!--Other HTML elements-->
<div id="formButtons">
<input type="button" value="Back" />
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
You may want to give text-align: center to #schemeForm
<html>
<style>
#schemeForm {
width: 290px;
display: block;
background-color: black;
text-align: center;
}
#formButtons {
display: inline-block; /*to make it only as wide as buttons*/
background-color: orange;
}
</style>
<body>
<form id="schemeForm">
<div id="formButtons">
<input type="button" value="Back" />
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
Keep #formButtons display: block and set text-align: center.
#schemeForm {
width: 290px;
display: block;
}
#formButtons {
display: block;
text-align: center;
}
<html>
<body>
<form id="schemeForm">
<!--Other HTML elements-->
<div id="formButtons">
<input type="button" value="Back" />
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
It looks like you want display:block; instead of display:inline-block;
Please note: I have looked at several SO posts and various suggestions for floating 2 divs side by side, however none of them seemed to work for me.
A summary of suggestions are:
display: inline-block
float: left
others refer to overflow: hidden, overflow: auto with various implementations.
One had worked, required me to set the right div:
position: absolute;
right: 0px
This was undesireable since the button would attach itself the the right side, ignoring all parent container constraints.
Above is that what I want to achieve.
The left div has the blue background. The right div contains the button.
My code:
Html
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src=""images/icons/edit.png">
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
Css
Note:using a basis of bootstrap for most of my css needs
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
Help would be very much appreciated
Without any changes to css, purely using bootstrap:
Few key things: ensure you add columns (<div class="col-md-12">) after specifying <div class="row">
You can use the pull-left & pull-right classes to float the content:
<div class="row">
<div class="col-md-12"><!-- define columns in bootstrap -->
<div class="pull-left"><!-- use pull-left -->
<h1>
Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png">
</a>
</h1>
</div>
<div class="pull-right"><!-- use pull-right -->
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
</div>
Fiddle
This has better overall browser support than display:flex which is not supported in older versions of Internet Explorer.
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png"/>
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
Try to use display: flex!
You can search in Google, you can learn display: flex easily.
First, you need to create a container div for both your buttons, and then have them inside as 2 divs. Then you can write in your CSS:
.button_container {
display: flex;
justify-content: space-between;
align-items: center;
}
You don't need to write anything for the other 2 divs.
Sorry, I know this is super basic but I've been through my coding reference books all day and I think my mind's a little buggered. I need to get BOTH the input field AND the "submit" button in one line, in the center of the page, similar to Google.
.logo {
width: 50%;
display: block;
margin: auto;
}
.input-fields {
padding: 3%;
width: 40%;
display: block;
margin: auto;
font-size: 90%;
}
.submit {
padding: 3%;
width: 15%;
}
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything...">
<input class="input-fields submit" name="find" type="submit" value="Find">
</form>
</div>
The problem I'm getting is that the button is stacking underneath the text-field. What am I missing out?
Well Google has it vertically and horizontally aligned so you should try something like this (simplified version):
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100vw; height: 100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
.align-me {
display: flex;
flex-direction: column;
align-items: center;
}
.align-me > .form-wrapper > .center {
display: flex;
}
<div class="align-me">
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="...">
<input class="input-fields submit" name="find" type="submit" value="Search">
</form>
</div>
</div>
But their design is not responsive and this is.
What you are seeing is the default behaviour of display:block.
Using display:inline-block will make them block elements so you can add padding, etc, but make them inline so they will appear beside each other (assuming they fit, and other styles don't change the default behaviour).
Just change the display from block to inline-block in your CSS here:
.input-fields {
[...]
display:inline-block;
}
Working snippet:
.logo {width: 50%; display:block; margin:auto;}
.input-fields {
padding:3%;
width:40%;
display:inline-block; /* change this from block to inline-block */
vertical-align: middle; /* this will help with any vertical alignment issues */
margin:auto;
font-size:90%;
}
.submit {
padding:3%;
width:15%;
}
/* Add this this to center your inputs -
you included the "center" class in your HTML but not it in your CSS */
.center { text-align:center}
<header><img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za"/></header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything..."/>
<input class="input-fields submit" name="find" type="submit" value="Find"/>
</form>
</div>
You are missing a
display: inline-block;
on the elements you want to display in line. You currently have 'display: block;' This will push elements on to there own line.
You may also want:
vertical-align: middle;
To make them vertically aligned relative to each other.
To make sure they both stay dead center in the page put them all in a container (or just use your existing form container) and style it like:
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
This will ensure no matter what the screen size is the container is in the middle both vertically and horizontally.
So if i have only one element, in my case a button, i just add the .center-block class to that element and it is centered.
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" class="btn btn-primary center-block">Element 1</button>
</div>
</div>
But what if i have two elements? I tried to wrap them in a div and added a .center-div class like so:
HTML:
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-div">
<button type="submit" class="btn btn-primary">Element 1</button>
<button type="submit" class="btn btn-primary">Element 2</button>
</div>
</div>
</div>
CSS:
.center-div {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.center-div is almost the same as .center-block except that i used display: inline-block; instead of display: block; so that it fits the contents size.
Sadly it doesn't work. Unless i change it to display: block; and assing it a fixed width like 200px.
What am i missing here?
Margin right and left set to auto only works if the width of the element is fixed.
As your center-div is now an inline-block, you need a text-align: center property on its container.
<div style="text-align: center">
<div class="center-div">
<!-- inner elements -->
</div>
</div>
I used a style attribute for convenience in this example
see if this helps:
.center-div {
width: 50%;
border: 1px solid black;
display: inline-block;
margin:0 auto;
text-align: center;
}
body{
text-align: center;
}
Task: Make text box 100% width but allow enough room for button.
Problem: Button appears on next line and text box exceeds width of its container.
<div class="field">
<input type="text" name="my-field" />
<input type="button" id="my-button" value="Add +" />
</div>
.field {
margin-right: -70px;
width: 100%;
}
.field input[type=text] {
display: block;
float: left;
margin-right: 70px;
}
.field input[type=button] {
display: block;
float: right;
}
My primary layout uses the following trick to achieve flexible width with fixed sidebar, but for some reason this is not working on the above.
<div class="outer-wrap">
<div class="content">
...
</div>
<div class="sidebar">
...
</div>
</div>
.outer-wrap {
margin-right: -300px;
width: 100%;
}
.content {
float: left;
margin-right: 300px;
}
.sidebar {
float: right;
}
What mistake am I making here?
You have to screw with the HTML a bit, but otherwise this works perfectly in IE7+ and all modern browsers.
See: http://jsfiddle.net/thirtydot/25bZC/
CSS:
.field > span {
display: block;
overflow: hidden;
padding-right: 10px
}
.field input[type=text] {
width: 100%
}
.field input[type=button] {
float: right
}
HTML:
<div class="field">
<input type="button" id="my-button" value="Add +" />
<span><input type="text" name="my-field" /></span>
</div>
To pull this off you must ensure that the element which you are floating right comes before the one floating left. Like this
<div class="field">
<input type="button" id="my-button" value="Add +" />
<input type="text" name="my-field" />
</div>
try giving fixed width to
field input[type=text]
and
.field input[type=button]