This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I my html page I have a checkbox and two buttons aligned horizontally. These are populated dynamically through a PHP function. I find aligning the checkbox to exactly the same size as buttons and in line with buttons difficult.
The following is a minimal example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="col-xs-6 col-sm-2 text-center">
<img src="" width="200" height="200" class="img"/>
<h6>Test Image</h6>
<input type="checkbox" id="'.$imgnam.'" title="Select Image" name="matchedImage" value="'.$imgnam.'" >
<button class="actButton" id="tbutton" onclick="downloadImage(this.id)" title="Download Image" style="background-color: #CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton dropbtn" id="shareImage" onclick="shareImage(this.id)" title="Share Image" style="background-color:#CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</div>
</body>
</html>
If I apply css to checkbox such as :
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
The box appears few pixels above the button. How do I align the checkbox with the buttons. Attaching an image output
Remove all padding and add the following to .actButton:
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px
Increase the font-size to 18px. Add .actButton class to checkbox as well and remove everything but the border and appearance properties.
Also the containing <div> has been changed to a <fieldset> and class .col-sm-2 was changed to .col-sm-6 at -2 means that there's less space as the screen gets bigger, did you really want backwards behavior? If so just change back to .col-sm-2. The <main class='container'> and <section class='row'> was added as well (normally these tags would be <div> but it's just easier to read using semantically correct tags).
Demo
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid black;
}
.actButton {
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px;
background-color: #CECECE;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
margin: 10px 0px 22px 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main class='container'>
<section class='row'>
<fieldset class="col-xs-6 col-sm-6 text-center">
<img src="https://via.placeholder.com/200" width="200" height="200" class="img" />
<h6>Test Image</h6>
<input type="checkbox" title="Select Image" name="matchedImage" class='actButton'>
<button class="actButton dropbtn" id="tbutton" title="Download Image"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton" id="shareImage" title="Share Image"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</fieldset>
</section>
</main>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
did you mean em? It's mm in your code.
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
Add this line in your css for the checkbox
vertical-align: middle;
Related
I'm really new to programming. Whenever I try inserting an image using it moves the border down and inputs down. I then have to move them back to match the text as shown in the picture below. I do that using "margin:" in CSS. Why do the borders and input move down when I try inserting it? Is there an easier way to position things like borders rather than using :margin:" ?
CSS(for the navbar and the input):
#navBar {
border: 2px solid black;
height: 30px;
width: 43%;
margin-top: -42px;
margin-left: 405px;
padding: 5px;
}
#searchInput {
margin-top: 3px;
margin-left: 1250px;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Restaurant</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "{{ url_for('static', filename='style.css') }}">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<img src="/static/searchImage.png" id="searchImage">
<div id="search">
<input id="searchInput" type="text">
</div>
<div id="navBar">
<a href="deals">
<button id="dealsButton">Deals</button>
</a>
<a href="burgers">
<button id="burgersButton">Burgers</button>
</a>
<a href="drinks">
<button id="drinksButton">Drinks</button>
</a>
<a href="sides">
<button id="sidesButton">Sides</button>
</a>
<a href="desserts">
<button id="dessertsButton">Desserts</button>
</a>
</div>
</body>
</html>
Image:
The border was perfectly aligned with the text before inserting the image and input was right next to the border. But when I insert this happens.
Basiaclly, I am trying to make a upload form for my website. I was wondering if there is any CSS that would make this look much more pleasing and unique. The code below is only HTML. I only need the CSS but if you find any way to improve the HTML, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file1"/>
<input type="submit" value="send!"/>
</form>
</body>
</html>
One way you could improve is change the <input type="submit" value="send!"/> code to <button id="" class="" type="submit">Your Text Here</button>. Also for css codes for like buttons I reccomend use something like this
ButtonIDHere {
border-radius: 25px;
border: 4px solid blue;
padding: 10px;
}
and to make inputs a little nicer use something like this
.InputClass {
position: absolute;
width: 150px;
top: 150px;
left: 730px;
z-index: 4;
}
Also maybe change the border color and stuff.
yo so what do you actually wanna see I just made the form centred and added some colour.
do u want the buttons to look nicer?
https://jsfiddle.net/jqc05Ldk/5/
.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
color: #BBDEF0;
border-radius: 25px;
}
input[type="submit"]{
border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;
}
input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;
}
For these type of file inputs you can use form control in bootstrap which does not include the external css that much because bootstrap is a css framework and the button styling also will be nice when we use bootstrap Try this code.This code also includes the alert that comes after send button.Try doing these type of forms with bootstrap
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<style>
.container{
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 25px;
}
</style>
<script type="text/javascript">
function showMessage(){
alert("Thanks Your papers have been evaluated");
}
</script>
</head>
<body>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<div class="container mt-4 mb-2">
<form>
<div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>
I am working with bootstrap. I got a problem. I am using the following classes: form-control and form-inlinel. And here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<div class="center">
<div class="label label-primary">First interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from1">
<input type="text" class="form-control" placeholder="To" id="to1">
</div>
<div class="label label-primary">Second interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from2">
<input type="text" class="form-control" placeholder="To" id="to2">
</div>
<button type="button" class="btn btn-success" id="button">Show intersection</button>
<div class="label label-primary moveDown">
Intersection:
</div>
</div>
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
Here is css:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:0;
margin-top: 5px;
margin-bottom: 5px;
}
.container-fluid
{
padding: 20px;
text-align: center !important;
}
.label
{
font-size: 15px !important;
margin-bottom: 10px !important;
}
.center
{
width: 200px;
margin: 0 auto;
}
.moveDown
{
margin-top: 5px !important;
display: block !important;
}
.label.moveDown
{
display: inline-block !important;
}
And now about the problem. If you start the html on medium screen it is exactly okay and exactly what I want. However, try to resize and you will notice the problem. It is input the thing that is not satisfies me, it moves to left on small enough screen. If you know how I can tackle that help me, please.
If you change this part of your CSS to read:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:0 auto;
margin-top: 5px;
margin-bottom: 5px;
}
The Margin: 0 Auto; attribute force center the inputs for you!
It could even be shortened to:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:5px auto;
}
To take into account the 5px margin you've added.
Hope this helps!
There are two ways you can make it stays centred.
In the element input[type="text"], add the value auto in margin and it will stay centred.
Or you can add the property display: inline-block; in input[type="text"].
It works both ways.
EDIT: The reason that it doesn't stay centred when reduced to mobile size is because Bootstrap has set the element input as block; pushing it to the left side.
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 100px;
margin: 5px auto;
}
.container-fluid {
padding: 20px;
text-align: center !important;
}
.label {
font-size: 15px !important;
margin-bottom: 10px !important;
}
.center {
width: 200px;
margin: 0 auto;
}
.moveDown {
margin-top: 5px !important;
display: block !important;
}
.label.moveDown {
display: inline-block !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<div class="center">
<div class="label label-primary">First interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from1">
<input type="text" class="form-control" placeholder="To" id="to1">
</div>
<div class="label label-primary">Second interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from2">
<input type="text" class="form-control" placeholder="To" id="to2">
</div>
<button type="button" class="btn btn-success" id="button">Show intersection</button>
<div class="label label-primary moveDown">
Intersection:
</div>
</div>
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
Here is a fiddle
I removed the form-inline and changed it to it's own custom class (I just called it inputs for the sake of this example). Then I added simply added this CSS:
.inputs {
padding-left: 3.5em;
}
You can slide the fiddle back and forth now and see that it stays in the center.
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
i need to allign element under RED arrow right under the element where BLACK arrow is pointed at. In other words how do i allign element close enough to input like 2-5px.
http://i.stack.imgur.com/Q4IeX.png
code is here
CSS
form.loginform
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.divbg
{
width: 200px;
height: 167px;
position: fixed;
text-align: center;
vertical-align: middle;
margin-top: 30%;
margin-left: 40%;
background-color: aliceblue;
}
a.register
{
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 11px;
}
#pass
{
float: inherit;
margin: 0;
}
HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=StyleSheet href="loginstyle.css" type="text/css" media="screen"/>
</head>
<body>
<div class="divbg">
<form method="post" class="loginform">
Логин <div class="center"><input type="text" name="login"/></div><br/>
<div id="pass">Пароль <div class="center"><input type="text" name="password"/></div><br/>
хочу зарегистрироваться!<br/></div>
<input type="submit" name="submit" value="Войти"/><br/>
</form>
</div>
</body>
</html>
1 Get a modern browser
2 Install firebug or use developers tools
3 check if the last input box (black arrow) has some margin-bottom or padding-bottom.
4 If yes, set it to 0 or a negative value
5 if No, check if the element with the red arrow has margin-top, and remove it or set a negative margin-top value.
Without code, It's not so easy to help you
You have a <br /> tag after the #center div. That is what is pushing it down. You also have some padding around the input tag; both of those issues are what is causing that space.
Your code:
<div class="center"><input type="text" name="password"/></div><br/>
Remove that <br />