Maybe you can help me, I want to center vertically as well as horizonally the buttons side by side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Page</title>
<link rel="icon" type="image/ico" href="Logo.ico">
</head>
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
<body>
<div class="wrapper">
<input type="image" src="btn-system-konfiguration-orange.png">
<input style="padding: 1%" type="image" src="btn-digital-twin-orange.png">
<input type="image" src="btn-sensor-konfiguration-orange.png">
</div>
</body>
</html>
Do you have any ideas? The solution is probably very simple.
I believe if you use justify-content: space-around; can help with making them line up horizontally.
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
}
When you try to align it vertically you would need to use flex-direction: column; I am assuming youre doing this when the screen size is phone size so I would add it to a media query with max 400 or something along those lins
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
add
html,
body {
height: 100%;
}
the html and body need to have height defined in this case.
Working pen: https://codepen.io/vas131/pen/yLgydxN
Related
I am experimenting with flex-box but I seem to be failing to create nested flexboxes. As in the code below, while the container children behaves normally, the paragraphs in the text div do not perform as expected.
I am trying to create a row of divs (div 1 2 3) aligned horizontally spaced evenly, while the contents in the middle div (the two paragraphs) should be spaced vertically evenly.
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div>Div 1</div>
<div class="text">
<p>abc</p>
<p>def</p>
</div>
<div>Div 3</div>
</div>
</body>
</html>
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
weight: 100%
}
As Paulie said you have to add a height to your text class. In addition to that make the default margin and padding of the body 0 so that you can see the evenly spaced div(s). Here is the code for the css
*{
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.text {
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
I`ve been struggling with some css code, specifycally with flex. First i had to figure it out how to stick footer at bottom but now i cant center my divs. Here is the html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as
you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</html>
</div>
and the css:
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.optional-content-wrap {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.content-wrap {
flex: 1 1;
}
You want the children of the flex to be centered. So I set .content-wrap display to flex, and aligned items within. also text-align center.
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrap {
flex: 1 1;
}
.content-wrap {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</body>
</html>
the goal is to somewhat recreate google's search bar. What i've got so far:
<head>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="positions.css">
</head>
<body>
<div id="input_field">
<input type="text" name="q">
</div>
<form action="https://google.com/search">
<div class="flexbox-container">
<div class="button_search_pos"><input type="submit" value="Google Search"></div>
<div class="lucky_pos"><input type="submit" value="I’m Feeling Lucky"></div>
</div>
And the .css to that:
I tried several tips of other solved issues on Stackoverflow, but they didn't seem to work. Found some vids on youtube with already finished forms like this, but thats not my way of doing things. How do i center the input over both buttons from the Flexbox? The input must be "flexible" so that when the page shrinks, it wraps accordingly to other elements.
Thanks in advance!
#input_field{
position: absolute;
top: 310px;
left: 41%;
}
.flexbox-container{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}```
[1]: https://i.stack.imgur.com/7SfuF.png
Try this CSS code, i edited your's
body {
text-align: center;
}
#input_field{
width: 50%;
margin: auto;
margin-top: 10%
}
.flexbox-container{
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
}
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}
I'm trying to help a friend with this site. Specifically he wants the two images below the large image at the start of the page to align with the edge of the page, so that the edge of the right image aligns with the edge of the image above it.
I created the following mini demo. In it I have a flex container around the anchors with flex-basis set to 490px. However the images are not staying inside the anchor elements, nor the main column container with width: 1000px. We would like the images to be 490px wide, and the left image should align with the left edge and the right image should align with the right edge.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>
Thoughts?
You were close, you just need to add a max-width of 100% to the images to stop them overflowing the container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
.kickers img {
max-width: 100%;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>
Can someone explain to me why when I set min-height of my section to calc(100vh), it results in a large window size and small text on iOS 10 (iPhone SE)?
section {
display: flex;
display: -webkit-flex;
display: -webkit-box;
align-items: center;
-webkit-align-items: center;
-webkit-box-align: center;
min-height: calc(100vh);
text-align: center;
}
section div {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<section>
<div>
<h1>Title</h1>
<h2>Description</h2>
</div>
</section>
</body>
</html>
have you make default body styling. body{margin:0; padding:0} if not please try this. It may solve your issue if you are using above html,css.