I'm having a problem with centering my input[type="submit"].
I'm using bootstrap on my website also.
I tried many ways but nothing seems to work. Can someone please help me with this?
.centerButton{
max-width: 700px;
text-align: center;
position: relative;
}
.btnsubmit{
border-radius: 5px;
height: 60px;
color: white;
background-color: #60C3AD;
border: none;
font-family: 'Arial', sans-serif;
font-weight: lighter;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-bottom: 15px;
}
Check with the below link you have a button at center just as you want.
http://jsfiddle.net/wmDL8/26/
<div id='toolbar'>
<div class='text-center'>
<div class="btn">
<input type="button" class="btn btn-default"/>
</div>
</div>
Related
I'm working on a website that has been partially constructed.
I came across this code which displays a button without the href
<div class="practices__btn"><button>Learn More</button></div>
I've tried to fix it with the following code but find that it breaks the CSS.
<button class="practices__btn">Learn More</button>
Here is the CSS code.
.practices__card h2 {
text-align: center;
}
.practices__card p {
text-align: center;
margin-top: 24px;
font-size: 20px;
}
.practices__btn {
display: flex;
justify-content: center;
margin-top: 16px;
text-decoration: none;
}
.practices__card button {
color: #fff;
padding: 14px 24px;
border: none;
outline: none;
border-radius: 4px;
background: #131313;
font-size: 1rem;
}
This is the code that the button should fit into
<div class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<button class="practices__btn">Learn More</button>
</div>
I appreciate the help. I can't find the problem yet it seems simple.
I don't think using an anchor tag (<a>) on a button is the best practice. My advice is to make it a form instead, then add an action to it.
.practices__card h2 {
text-align: center;
}
.practices__card p {
text-align: center;
margin-top: 24px;
font-size: 20px;
}
.practices__btn {
display: flex;
justify-content: center;
margin-top: 16px;
text-decoration: none;
}
.practices__card button {
color: #fff;
padding: 14px 24px;
border: none;
outline: none;
border-radius: 4px;
background: #131313;
font-size: 1rem;
}
<div class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<div class="practices__btn">
<form action="https://example.com">
<button type="submit" class="practices__btn">Learn More</button>
</form>
</div>
</div>
</div>
</div>
So I am trying to make it look like this
However, it currently looks like this
As, you can see the top section with the logo and register have their own section. I want it to stay on top of the background image. I do not want to use position: absolute; or position : fixed; since i want it to say in its own section. I have also tried using a negative margin and it does not work. Any help is appreciated.
.top-firstsection {
display: flex;
}
.logo-header {
height: 80px;
}
.nav-list {
margin-left: auto;
list-style: none;
display: flex;
}
.leftandright {
display: flex;
justify-content: space-between;
}
.login {
font-family: Helvetica;
font-size: 13px;
color: #000000;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
cursor: pointer;
}
.register {
font-family: Helvetica;
font-size: 13px;
color: #0972D7;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
}
.first-left {
padding-top: 220px;
padding-left: 171px;
}
.first-left h1 {
font-family: Poppins-Regular;
font-size: 40px;
color: #000000;
letter-spacing: 0;
line-height: 50px;
}
.sectionOne-textbox {
border: 1px solid #EBEBEB;
border-radius: 4px;
font-family: Helvetica;
font-size: 14px;
color: #000000;
letter-spacing: 1.05px;
line-height: 52px;
width: 80%;
}
.sectionOne-button {
background: #1F8FFB;
border-radius: 4px;
border: 1px solid;
padding: 16px 25px;
font-family: Helvetica;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 1.3px;
text-align: center;
margin-top: 24px;
}
<section class="first-section">
<div class="top-firstsection">
<img src="logo.svg" alt="logo" class="logo-header">
<ul class="nav-list flex">
<li>
LOGIN
</li>
<li>
REGISTER
</li>
</ul>
</div>
<div class="leftandright">
<div class="first-left">
<h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
<input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
<button class="sectionOne-button">GET STARTED NOW!</button>
</div>
<div class="first-right">
<img src="firstsectionbackground.png" alt="main graphic" class="main-graphic">
</div>
</div>
</section>
I have a problem with one of sections in my HTML code.
My idea is simply: one section made by 1 row, who is divided on 2 columns.
In left column i tried to put countodwn timer, and "submit" button in right column. They have to be side by side, and on equal distance in regards to each other; but there are some problems - they are on unequal distance and i am wondering how to fix it...
Also, when i test how draft of my site looks on mobile, parts of the clock do not stay together - they just move under each other.
Here is a jsfiddle.
What i am doing wrong?
<div class="container-fluid">
<div class="row align-items-center"><div class="col-6 mx-auto">
<h3 style=" font-family: Open Sans; font-weight: light; font-size: 20px; color: 636363;letter-spacing: 1px; padding-left:110px;">Deadline:</h3>
<div id="clockdiv">
<div> <span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div> <span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div> <span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div> <span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
<div class="col-6 mx-auto">
<button class="button button1" style="width: 300px; height: 100px;">Submit</button>
</div>
</div>
</div>
And CSS:
#clockdiv{
font-family: Open Sans;
color: #ffffff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 0px;
border-radius: 3px;
background: #fffff;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #000;
display: inline-block;
position: relative;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
color: #000;
position: relative;
}
.button {
background-color: #fff;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Open Sans';
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: #000;
border: 2px solid #000;
}
.button1:hover {
background-color: #fff;
color: white;
I have a input field & button. However, there are two problems.
The text in the button is not centered.
The button is never the same height as the input.
To visualize it:
Ok, I also put together a super convenient fiddle to play with this.
How can I fix these problems? Make it look "perfectly aligned". I tried fiddling around with height settings, though was unsuccessful.
Code in that fiddle:
HTML:
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<input type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
</div>
</body>
CSS:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
try this css for your green button :
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
position: relative;
top: -2px;
}
use position: relative; top:1px; /* adjust this top to repositioning the button
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
#username{
height: 40px;
padding:0px;
margin-right: 10px;
}
.input-fields{
display:inline-flex;
}
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<div class="input-fields">
<input id="username" type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
<div>
</div>
</body>
Just replace your button CSS with this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
line-height: 35px;
width: 80px;
}
How about this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
/* New */
padding: 0px;
width: 50px;
height: 20px;
}
The padding 0px will center the text inside the button and the width and height you can use to define the button size. This is an good option for centering if you dont know the exact size of a picture or other things.
Here is the JSFiddle:
https://jsfiddle.net/vLbbkcna/3/
I create simple inline form with flex.
But in safari I found a bug - button lose width, here is screenshot:
In all another browsers all good.
How to fix this bug in safari ?
PS: I can`t set fixed width on button.
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-3">
<form action="" class="form-inline-flex">
<div>
<input type="text" />
</div>
<button type="submit" />Subscribe</button>
</form>
</div>
</div>
</div>
.form-inline-flex{
display: -ms-flexbox;
display: -webkit-flex ;
display: flex;
}
button{
display:inline-block;
padding: 13px 28px;
font-weight: 700;
text-align: center;
cursor: pointer;
border: 1px solid transparent;
padding: 13px 20px;
font-size: 16px;
line-height: 1.375;
}
input{
display: block;
width: 100%;
font-size: 14px;
padding: 7px 18px;
line-height: 34px;
color: #000;
border: 1px solid #d2d1d1;
}
CodePen
Add this to your button:
button {
…
flex: none;
}