I have looked for a solution to this for around half a day. I am just starting web design and I need to center a form horizontally and vertically. Right now it is in the top left-hand corner. Please do not mind the bad code I am going to tidy it up soon.
form {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.trans {
background:rgba(1,1,1,0.6);
}
body {
background-image: url(wallpaper.jpg);
}
.text {
}
.box {
display: table;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png">
<title>Peq Anon</title>
</head>
<body>
<div class="container">
<form>
<input class="trans text" type="text" name="Password">
<button type="submit" onclick="#">Submit</button>
</form>
</div>
</body>
</html>
Here is a simple solution: wrap your form in a container div and use display: flex property to set the alignment.
Try this:
<div class="container">
<!-- the rest of your code comes here -->
</div>
And for the CSS
.container {
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
}
Edit
You have to make sure that the height of your body, html and container elements are all set to 100%.
Look at this fiddle for an example: Fiddle
.container {
position: absolute;
top: 50%;
margin-top: -50px;
left: 0;
width: 100%;
}
form {
text-align: center;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
height: 100px;
}
You need to have a static form height though.
The form height:100px is the height of your form. the margin-top needs to be 50% of your form height.
Use margin:auto for horizontal center
Use top:50% and position:relative for vertical align.
Don't forget to define a height for the container and make its position relative too.
form {
margin: auto
display: table-cell;
text-align: center;
vertical-align: middle;
position:relative;
top: 50%;
}
.container{
position.relative;
height:200px;}
.trans {
background:rgba(1,1,1,0.6);
}
body {
background-image: url(wallpaper.jpg);
}
.box {
display: table;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png">
<title>Peq Anon</title>
</head>
<body>
<div class="container">
<form id="form">
<input class="trans text" type="text" name="Password">
<button type="submit" onclick="#">Submit</button>
</form>
</div>
</body>
</html>
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
I am working on this website as a side project. I have been trying to make this page responsive (this is my first responsive web page). So far I figured out everything except the social media buttons. I would like to place them on the bottom right corner of the page and have it be responsive however every time I do this when I resize the window they move start to move up. I have included my HTML and CSS. Thank you for all of your help.
I have tried using flexbox, bootstrap, and grid and cant get any of them to work, I am also a bit confused about which kind of CSS to use.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Giphy Search</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2Zw1T" crossorigin="anonymous">
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v4.0">
</script>
<div id="imgLogoDiv">
<img id="imgLogo" src="/img/logo.png" alt="unable to load image">
</div>
<div id="divTxtField">
<input type="text" id="search" placeholder="Search for a gif!">
</div>
<div id="bs-divSearchButton">
<button id="bs-Button" type="button" class="btn btn-dark">Search</button>
</div>
<br>
<div id="GifDisplay">
<img id="gif">
</div>
<div id="socialMediaBottons">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-
href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
<script src="JS/script.js"></script>
</body>
</html>
CSS:
body {
background-image: url(img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#imgLogoDiv {
display: flex;
justify-content: center;
height: auto;
/*height: auto
Not sure if I should keep this since it seems to have to effect.*/
}
#imgLogoDiv #imgLogo {
width: 45%;
height: auto;
}
#divTxtField {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 1%;
}
#divTxtField #search {
border-radius: 25px;
}
#divTxtField #search:hover {
cursor: auto;
}
#bs-divSearchButton {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 20px;
}
#bs-divSearchButton #bs-Button:hover {
cursor: pointer;
}
#socialMediaBottons{
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 50vh;
}
#GifDisplay {
display: flex;
justify-content: center;
}
image of site showing buttons
This solution comes from the Bootstrap 4 page on Flex _
As recommended I added flex classes d-flex justify-content-end to the div #socialMediaBottons and removed the same from your CSS
So now the HTML section looks like this:
<div id="socialMediaBottons" class="d-flex justify-content-end">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a
target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
...while the pertinent CSS block only contains the height attribute:
#socialMediaBottons{
height: 50vh;
}
As you can see from this image the buttons are now aligned:
aligned buttons
Reference Docs:
Bootstrap 4 Flex: https://getbootstrap.com/docs/4.0/utilities/flex/
I appreciate you're trying to use Flexbox, but in this case it's not the right tool for the job.
You should use either absolute or fixed positioning (depending on what you're going for) to get the social buttons in the bottom corner. Just make sure body has position:relative.
body { position:relative }
#socialMediaBottons { position:fixed; bottom:10px; right:10px; }
#fbButton, #twitterButton { display:inline-block; }
This way, whatever height or width the viewport is, the buttons will always be a specified distance from the bottom right corner (you can adjust bottom and right to your liking).
You can use CSS as below:
.socialMediaButton{
display: inline-block;
margin: 5px;
}
.socialMediaButtons {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
}
See result here.
I want to align my input to be under my h1 which is inside my div main. The H1 is currently vertically and horizontally centered using flexbox and the input inherits the same properties. When I try to add display: inline; and display: inline-flex;, the input box still is not underneath the H1 and is to the right of it.
How do I make my input underneath my current H1 while also maintaining being inside my <div class="main">
html,
body {
padding: 0px;
margin: 0px;
}
.main {
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
z-index: -1;
}
.main-h1 {
text-transform: uppercase;
font-family: 'Secret Code';
font-weight: bolder;
font-size: 70px;
}
input {
display: inline-flex;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BackGround Color</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="colors.js"></script>
</head>
<body>
<script type="text/javascript">
function takeinput() {
var input = document.getElementById('user').value;
document.body.style.backgroundColor = input;
}
</script>
<div class="main">
<div class="main-h1">Full Screen BackGround Color</div>
<input type="text" name="enter" class="enter" id="user" value="" />
<input type="button" value="click" onclick="takeinput();" />
</div>
</body>
</html>
I think what you're looking for is flex-direction: column; inside of your .main class definition.
Here's a codepen to show you what I mean:
Codepen Example of Flexbox's flex-direction property
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!