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
Related
Header with logo
i want to align home, etc with the logo, but i think the logo is occupying all the space on top of the menu-headers and i dont know how to reduce it, i've already tried the margin-left or right and also padding but it doesnt help.
i also want to know if it is a bad practice to have negative CSS rules or if there is any bad practices in my code so far.
sorry for the bad english, i`m not a native
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="main-header">
<div class="Logo">
<img src="photos/Logo.png.png" alt="Makeup" class="center">
</div>
<div class="social">
</div>
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
</header>
<section>
</section>
</body>
</html>
body{
background-color: #137B77;
margin: 0;
padding: 0;
}
header{
background-color: #45a29e;
margin: 0;
padding:0;
justify-content: baseline;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
margin-bottom: -124px;
margin-top: -65px;
}
.main-header{
margin-top: 0px;
margin-bottom: 62px;
}
.header-menus{
padding-top: 0;
}
.header-menus ul li {
list-style: none;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
Since div elements are block elements, they take all available horizontal space of the parent element, i.e. a complete "line".
See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
I would recommend using display: flex on the .main-header class. By default the child elements will be arranged in a row (flex-direction: row).
The align-items property can be used to arrange the elements vertically.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.main-header {
display: flex;
align-items: center;
}
Demo: https://jsfiddle.net/u3gv6s7f/
Give the logo a width of x px. That will give it a set size. You can do width=100% and make sure you style the container div as a inline-block or use flex-box in order to set its size straight.
.main-header {
display: flex;
}
img {
width: 100%;
}
That should make every element inside the header display on a row.
Look more into flex-box in order to understand it well. https://flexboxfroggy.com/ is a good resource.
You can use flexbox in main div which wraps logo and links
.main-header{
margin-top: 0px;
margin-bottom: 62px;
display: flex;
justify-content: center; //you can do also space-between or space-evenly
align-items: center;
}
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 2 years ago.
This is what I want:
https://i.stack.imgur.com/WTTMA.png
This is what I have:
https://i.stack.imgur.com/V7X6m.png
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic">Content</li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
CSS
.ul{
display: table;
margin: 0 auto;
list-style: none;
}
.li{
font-weight: bold;
font-size: 50px;
}
img{
width: 200px;
}
I've tried vertical align middle but it didn't do anything then I tried to center it with margins but it
didn't work out as I wanted and I also tried flex and absolute position.
Using a flexbox would be a better solution. Prerequisite is to put "content" inside a separate HTML element. In this case I used a span.
.ul {
/* display: table; */
margin: 0 auto;
list-style: none;
}
.li {
font-weight: bold;
font-size: 50px;
display: flex; /* Added */
align-items: center; /* Added */
}
img {
width: 200px;
}
<header>
</header>
<main>
<ul class="ul">
<li class="li">
<img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg" alt="pic">
<span>Content</span></li>
</ul>
</main>
<footer>
</footer>
Try using flex box
.li{
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
}
Use vertical-align: middle:
.selector {
vertical-align: middle
}
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
First of all I would like to welcome you to the Stackoverflow Community.
You can achieve the required result by using flexbox in your CSS. I am putting the same HTML over here, just putting that "content" inside a span.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic"><span>Content</span></li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
Add display:flex; and align-items: center; to your .li selector as shown below.
.ul{
display: table;
margin: 0 auto;
list-style: none;
}
.li{
font-weight: bold;
font-size: 50px;
display:flex;
align-items: center;
}
img{
width: 200px;
}
Hoping that my answer is helpful to you.
I'm having an issue with a <div> pushing up another <div> from underneath.
Basically, the <div> above is a <canvas> of defined dimensions, and underneath is a <div> that contains a <p> element. After a event is fired, I'm using innerHTML to change the contents of the <p> element. Because of this, the content of the <p> element goes from one line to two. When that happens, however, the <canvas> is pushed up the page.
I've tried using different position CSS values, but because I'm using flexbox it means that the two divs stack up.
Here's the CSS and HTML:
.container {
padding: 10px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.player {
margin-bottom: 20px;
}
.textContainer {
font-size: 24px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div class="player">
<canvas id="canvas"></canvas>
</div>
<div class="textContainer">
<p id="moveText">Moves: 0</p>
</div>
</div>
</body>
</html>
Thanks in advance!
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>
I currently have a page like this:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I want the h3 and the button to be vertically aligned in the div, and I've tried setting style to vertical-align:middle but it doesn't work. What should I do?
EDIT: It seems my original question was unclear. I meant that I want the header text and button to appear on the same "line", but to be aligned vertically on that line. Right now, I can get them to be on the same line but the text and the button will be aligned by the top edge rather than the center.
Weave: http://kodeweave.sourceforge.net/editor/#0def3ea11664636810328b98a8780ed2
You didn't post your css so I don't know what you're working with. So here's a quick note:
NOTE: vertical-align only works for display: table-cell; and display: inline; elements (It also applies to ::first-letter and ::first-line).
Here's a simple solution using display: table; on the parent and display: table-cell; for what you want vertically centered.
If you want your button centered you have to remove the pull-right class, or you can add another class after it and then override it's css. (Simple solution, just remove the pull-right class.
Edit: So you want the button in the same line as your h3 tag right?
Well before I show you how to solve this remember that h1-h5 tags are all display: block; elements meaning they will always embed as a new line. (Like a paragraph <p> tag) So you need to tell the h3 tag to display either inline or inline-block.
Here is my revised weave: http://kodeweave.sourceforge.net/editor/#7b9839fb7971df2a27b7af895169ad8a
html, body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
h3 {
display: inline-block;
}
.btn {
margin-top: 15px;
}
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<div class="container table">
<div class="page-header cell">
<h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button>
</div>
</div>
https://jsfiddle.net/dsupreme/m92e9dkr/
Make use of FlexBox
HTML code:
<div class="container">
<div class="page-header">
<div id="vertical"><h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button></div></div>
</div>
</div>
</div>
CSS code:
.container {
width: 100%;
text-align: center;
}
#vertical {
width: 100%;
}
h3 {
margin: 0;
padding: 0;
}
.page-header {
height: 200px;
width: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
You can verify the elements are vertically aligned by setting bootstraps default margins and paddings to 0px if needed.
.container {
white-space: nowrap;
background: #eee;
}
.contener:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.page-header {
display: inline-block;
vertical-align: middle;
width: 300px;
}
https://jsfiddle.net/curtisweeks/md5qos66/
Explanation and source: https://css-tricks.com/centering-in-the-unknown/
http://codepen.io/ruchiccio/pen/xVmJaG
<div class="container">
<div class="page-header">
<div id="vertical"><h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button></div></div>
</div>
#vertical {
position: absolute;
top: 40%;
width: 100%;
}
h3 {
margin: 0;
padding: 0;
}
.page-header {
height: 200px;
background-color: red;
position: relative;
}