I am making a mock website as I learn to code and I cannot figure out how to center my "View my Work" button in CSS. I have looked at other issues people were having with this on Stack Overflow and I have tried wrapping it in a div and I have tried using input[type="button"] but still not getting anywhere.The second option allows me to move the button a little bit to the right but then stops and I can't get it all the way in the center.
The issue is at maximum screen width (#media screen and (min-width: 992px)).
A second issue I am having is that I want my background picture to have the opacity but not the heading and text in button on top of it. I do not know how to stop the opacity in the text. Thanks guys!
Here is the HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css">
<title> Sankyeat Kumar | Web Developer </title>
</head>
<body>
<div id="menu">
<div>Home</div>
<div>Portfolio</div>
<div>Blog</div>
<div>Contact</div>
</div>
<div id="banner">
<div id="heading">
<h1> Sankyeat Kumar</h1>
<h4>London Based Web Developer For Hire</h4>
</div>
<div id="button">
<input type="button" value="View My Work" class="portfolio">
</div>
</div>
<div id="section-a">
<h2> Services </h2>
<div id="services">
<div class="sections">
<h3>Web Design</h3>
<p class="section-para">Freelance-Creator offers an exceptional variety of web design services to suit everybody, whether you're self employed or a small business, I can come up with a quality website to suit your needs. </p>
</div>
<div class="sections">
<h3>Responsive Web Sites </h3>
<p class="section-para">With everybody on the go with mobile & tablet devices it is important to make sure your website is accesible on the go. Responsive websites are also a cheaper alternative to a phone app! </p>
</div>
<div class="sections">
<h3>SEO & Marketing </h3>
<p class="section-para">SEO (Search Engine Optimisation) is important when it comes to creating an online presence for your website. We offer simple, cost effective and proven marketing results to all of our clients. </p>
</div>
<div class="sections">
<h3>CMS Solutions</h3>
<p class="section-para">Take full control of your website, whether it be a simple text modification, to an image upload or to adding 100's of products, we will find the right CMS solution for you, that is simple and user friendly. </p>
</div>
</div>
</div>
<div class="container">
<h2>Contact me</h2>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
Here is the CSS:
body {
margin:0px;
padding:0px;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#media screen and (min-width: 320px) {
#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;
}
#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}
#menu div a {
color:white;
text-decoration: none;
font-size: 1.5em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#menu div a:hover {
text-decoration: underline;
}
#banner {
height:100vh;
width:100%;
}
#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#banner #heading h1 {
color:black;
font-size: 4em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
text-align: center;
z-index: 1;
}
#banner #heading h4 {
color:black;
z-index: 1;
padding: 0 40px;
text-align: center;
font-size: 2em;
}
.portfolio {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
padding:10px;
background-color: black;
color: white;
border-radius: 4px;
position: relative;
left: 143px;
}
#heading h4 {
color: white;
font-size: 3em;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
bottom:50px;
}
#section-a > h2 {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#section-a {
background-color: #5F5F5F;
}
#section-a h2 {
color:white;
}
#services {
display:flex;
flex-wrap: wrap;
color: white;
}
.sections {
padding: 0 20px;
}
.sections h3 {
text-align: center;
}
.section-para {
text-align: justify;
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
}
only screen and (min-width: 768px) {
}
#media screen and (min-width: 992px) {
#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;
}
#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}
#menu div a {
color:white;
text-decoration: none;
font-size: 1.5em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#menu div a:hover {
text-decoration: underline;
}
#banner {
height:100vh;
width:100%;
background-image: url('images/london.jpg');
opacity: 0.5;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
z-index: 0;
}
#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#banner #heading h1 {
color:black;
font-size: 5em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
z-index: 1;
}
#banner #heading h4 {
color:black;
z-index: 1;
padding: 0 40px;
text-align: center;
}
.portfolio {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 30px;
padding:10px;
background-color: black;
color: white;
border-radius: 4px;
display: flex;
justify-content: center;
}
input[type="button"] {
position:relative;
right:350px;
}
#heading h4 {
color: white;
font-size: 3em;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
bottom:50px;
}
#section-a {
margin-top: -33px;
margin-bottom: 30px;
}
#section-a > h2 {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 100px;
}
#services {
display:flex;
flex-wrap: nowrap;
margin-bottom: 80px;
}
.sections {
padding: 0 20px;
margin-bottom: 150px;
}
.sections h3 {
text-align: center;
}
.section-para {
text-align: justify;
}
.container {
margin-top: -80px;
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in
place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea
(not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
}
you should try setting the following property for the button
display:inline-block;
position:static
margin-auto;
and don't forget to set it's parent width to 100%;
Hope It Helps
Related
I just made my website header and now I'm trying to build the side bar, however instead of sticking to the left, it's being pushed to the right and I don't know why... but I guess it's because of the float elements that I added in the header? I've tried setting the margins to 0, floating it to the left, and nothing works.
Here's the code:
body {
font-size: 62.5%;
}
:root {
--color-primary: #b22222;
}
/* Box */
#box {
margin: 2% 20%;
}
/* Header */
#header {
background-color: var(--color-primary);
width: 100%;
height: 100px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.oldenhook_icon {
height: 90px;
width: 90px;
margin-left: 15px;
float: left;
}
.header_h1 {
color: #800000;
font-family: "Noto Sans Mono", monospace;
font-size: 2.5rem;
font-weight: 900;
display: inline-block;
margin-left: 30%;
margin-bottom: 0;
}
.flexbox {
display: flex;
flex-direction: row;
float: right;
list-style-type: none;
margin-right: 22%;
}
.list-item {
color: #fff;
padding-left: 5px;
text-decoration: none;
font-size: 12px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}
/* Search box */
#searchbox {
top: 40px;
position: relative;
}
<div id="box">
<div id="header">
<i
><img
class="oldenhook_icon"
src="icons/icon2.png"
alt="The Oldenhook Icon"
/></i>
<div>
<h1 class="header_h1">[ oldenhook ]</h1>
<ul class="flexbox">
home
search
global
social net
invite
faq
logout
</ul>
</div>
<div id="searchbox">
<label for="email">Email:</label>
<input name="email" id="email" type="text">
<p>oifjqoifjq</p>
<p>ofijqofiqjf</p>
</div>
</div>
Your code is fine just remove float: right; from class flexbox in css
I think you can add position: absolute; to class .flexbox{}
So I made a post similar to this one, since I didn't get a precise answer and didn't understand the instructions. So I am once again asking for your support.
There are a couple of issues regarding my nav bar that I am unable to fix. One of them is a button sticking inside of the nav bar, but it doesn't even belong in the div class.
Navigation Bar
The second issue is that I can't line the logo/text [SINUS] and the links together in one line.
Any help would be appreciated!
/*====================
The CSS File
Section 1:
Buttons
=====================*/
button {
background-color: #358cf0;
border: none;
border-radius: 18px;
text-align: center;
text-decoration: none;
opacity: 0.8;
font-size: 14px;
color: rgb(255, 255, 255);
padding: 12px 48px;
transition: 0.3s;
outline: none;
}
button:hover {
opacity: 1;
}
ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: raleway;
}
ul li:hover {
color: orange;
}
/*====================
The CSS File
Section 2:
Alerts
=====================*/
.container {
position: fixed;
top: 74%;
right: 0;
left: 77%;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: basic;
}
.modal {
width: 40%;
min-width: 20rem;
background-color: #ffffff;
border-radius: 12px;
}
.modal-header {
display: flex;
align-items: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: #358cf0;
padding: 8px 10px;
color: #fff;
font-size: 110%;
font-weight: 600;
font-family: basic;
}
.modal-content {
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.modal-footer {
text-align: center;
}
/*====================
The CSS File
Section 3:
Body etc.
=====================*/
body {
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
position: fixed;
width: 100%;
left: 0;
top: 0;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
/*====================
The CSS File
Section 4:
Text
=====================*/
#font-face {
font-family: basic;
src: url(Helmet-Regular.ttf);
}
h1 {
font-family: basic;
color: white;
font-size: 390%;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sccp.css">
<title>Sinus - 【Home】</title>
<link rel="icon" href="titl.ico">
<link rel="apple-touch-icon" href="titl.ico" />
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
<div class="container" role="alert">
<div class="modal">
<div class="modal-header">
UPDATE! Sinus 1.0v
</div>
<div class="modal-content">
Here new stuff go gogogo
<br>Read more...
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
</html>
To align the logo and links, use flex on the #navigation-container:
#navigation-container {
display: flex;
justify-content: space-between;
align-items: center;
}
justify-content: space-between will put the maximum space between the contents - in this case your logo and ul that contain the links. align-items:center lines them up vertically.
https://codepen.io/doughballs/pen/RwPrYoX
Not sure what your issue with the button is but because your nav has position:fixed, it is being taken out of the flow of the page, so the button doesn't 'know' it is there. If you wanted it to sit under the nav, you need to add a container with margin-top to push it down. But I'm not sure what your issue is with it, clarify and I'll amend the codepen.
I started using flexbox for my footers and now on all of my pages with forms the background-color is now the default white. Here is an example of one of my pages:
login.php
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
height: 95vh;
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
content {
align-items: center;
justify-content: center;
}
.signin {
color: #99cc00;
margin: auto;
font-size: 24px;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
transition-duration: .4s;
border: greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="../../favicon.ico">
<meta charset="UTF-8">
<title>TapLovers</title>
<link rel="stylesheet" href="../background.css">
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class=content>
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input type="text" email="email" placeholder="Email" class="loginInput"><br>
<input type="text" password="password" placeholder="Password" class="loginInput"><br>
<input type="submit" name="submit" id="login" class="loginButton loginButtonColor" value="Login To TapLovers!" /><br><br>
<a href="../register/register.php">
<font color="#99cc00">Create a FREE TapLovers Account!</font>
</a>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3><br>© 2018 TapLovers, All Rights Reserved
</footer>
</body>
</html>
Also I was trying to center my forms and my title using flexbox as well and I haven't gotten that working either. I'm not really sure what other details would be useful for this particular problem. If you need any more details just reply below and I'll answer them as they come out.
EDIT: The snippet that compiles on stack overflow shows my background just fine. What's more is if I use ctrl+shift+i on my page then the background works but if I just reload on my page then the background will turn white.
I did not see the issue with background fluctuations. I think it is a delay in the page load. I have added comments to help with the flexbox centering of items.
/*CSS reset of browser agent. Removes the horizontal scroll currently happening in page.*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
/* No need to restrict the height.
height: 95vh;*/
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
/*make the content div flex so that the form can take the center alignment from flexbox properties. Add the centering here and avoid the margin: auto property */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
/*Add flexbox style the inputs as blocks and remove <br> from HTML*/
.signin {
color: #99cc00;
font-size: 24px;
display: flex;
flex-direction: column;
}
.signin>* {
margin: 5px 0;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
/*Please check your animation ??
transition-duration: .4s;*/
/*add border size and transparency 1px solid*/
border: 1px solid greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<div class="content">
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input class="loginInput" placeholder="Email" type="text"> <input class="loginInput" placeholder="Password" type="text"> <input class="loginButton loginButtonColor" id="login" name="submit" type="submit" value="Login To TapLovers!"> <font color="#99CC00">Create a FREE TapLovers Account!</font>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3>
<p>© 2018 TapLovers, All Rights Reserved</p>
</footer>
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe
I'm trying to align my input sections in the center of the div, with the labels left aligned on the left of the input. I can't seem to get the input sections to align to the left of each other, in the center of the div. Bear with me, I'm incredibly new to coding of any sort so my code might not be the best.
Here is my html and css thus far:
This is what I would like it to look like. Label on the left, input field in the center. IMG
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent">Plot Name <input class="lpks-input"></div>
<div class="othercomponent">Other Name <input class="lpks-input"></div>
</body>
Here is a JSFiddle to show what I have now:
https://jsfiddle.net/h8vo2opv/
You can use width for div. And place <label> for your text in left section and put style float:left;
set width for label and input section also. check my code this will help you.
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width:100%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* font-size: medium; */
font-weight: bold;
display: block;
align-items: center;
background: wheat;
}
.othercomponent input {
width: 60%;
float:left;
}
.othercomponent lebel {
float: left;
width:30%;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent"><lebel>Plot Name </lebel><input class="lpks-input"></div>
<div class="othercomponent"><lebel>Other Name </lebel><input class="lpks-input"></div>
</body>
If i understood well :) you want them in center of white div :
HTML :
<body class="body">
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"><input class="lpks-input"></span></div>
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"> <input class="lpks-input"></span></div>
CSS:
.body {
background-color: #EDEDED;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
text-align:center;
font-weight: normal;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
.left{
float:left;
}
You can add a bit of markup and then style your form like a table. This will line up the inputs based on the label widths.
.form {
display: table;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
/* display: block; */
display: table-row;
}
.lpks-input {
/* width: 35%; */
display: inline-block;
padding-right: 5px;
}
label,
.input-container {
display: table-cell;
vertical-align: middle;
}
<body class="body">
<form>
<div class="othercomponent"><label for="input1">Plot Name</label><div class="input-container"><input id="input1" class="lpks-input"></div></div>
<div class="othercomponent"><label for="input2">Other Name</label><div class="input-container"><input id="input2" class="lpks-input"></div></div>
</form>
</body>