I have a title and a button. The title should be left-aligned and the button should be right-aligned. But I have a problem that the button goes up.
How to align title and button on the same line?
.page-header {
margin: -16px -16px 16px;
padding: 16px;
color: $white;
background-color: $red;
}
<header class="page-header">
<h1>{{title }}</h1>
<span fxFlex></span>
<button mat-icon-button>
<mat-icon>navigate_before</mat-icon>
</button>
</header>
Add this CSS on page-header class:
.page-header {
...;
display: flex;
justify-content: space-between;
align-items: center;
}
Display Method
.page-header {
border: 1px solid black;
}
.display-child-element {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
<header class="page-header">
<h1 class="display-child-element">TITLE</h1>
<button class="display-child-element">TEST</button>
</header>
Flexbox Method
.flex-parent-element {
display: flex;
border: 1px solid black;
width: 50%;
}
.flex-child-element {
flex: 1;
border: 1px solid red;
}
<header class="page-header flex-parent-element">
<h1 class="flex-child-element">TITLE</h1>
<button class="flex-child-element">TEST</button>
</header>
Grid Method
.grid-container-element {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
border: 1px solid black;
width: 50%;
}
.grid-child-element {
margin: 10px;
border: 1px solid red;
}
<header class="page-header grid-container-element">
<h1 class="grid-child-element">TITLE</h1>
<button class="grid-child-element">TEST</button>
</header>
Related
I am trying to create a very simple webpage to learn a bit about CSS as I am awful with it.
I am trying to add a navigation bar to my page. The two elements that are not working as expected are the text-align: center (in .Item) and vertical-align: bottom. If I add or remove these lines nothing happens.
Could anyone tell me why these two parts don't seem to be working as expected? Thanks in advance.
My JSX is as follows:
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
About
</ul>
<ul className={classes.Item}>
Shop
</ul>
</div>
</div>
</React.Fragment>
My CSS is as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
}
.Item {
text-align:center;
margin:10px;
display: inline;
border: 2px solid black;
}
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
display: flex;
align-items: center;
justify-content: center;
}
.Nav ul{
margin: 0px;
padding: 0px;
}
.Nav li{
display: inline-block;
margin: 0 10px;
padding: 0px;
border: 1px solid red;
text-align: center;
}
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
<li> About</li>
</ul>
<ul className={classes.Item}>
<li> Shop</li>
</ul>
</div>
</div>
</React.Fragment>
After reading all of your suggestions I was able to do it as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
}
.Item {
position: relative;
text-align: center;
margin: 0px 50px;
display: inline;
border: 2px solid black;
top: calc(100% - 30px);
}
And
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<div className={classes.Item}>About</div>
<div className={classes.Item}>Shop</div>
</div>
</div>
</React.Fragment>
I'm trying to create a simple calculator using only HTML and CSS for the layout and, eventually, pure JavaScript for the functions.
I want the site/page to be responsive which is why I am using CSS Grid and no absolute units; % and fr instead of px...
The calculator itself should be a grid of centred squares with the text in the buttons centred both horizontally and vertically and all of the buttons should fit within the "calculator".
<html>
<body>
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
</body>
</html>
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
width: 100%;
height: 0;
padding: 50%;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
Codepen
The calculator div does not appear to be high enough to hold the buttons and the bottom row of the grid therefore overlaps and bleeds outside of the calculator.
I tried playing around with the height of the calc div (height: 100% ...) but the last row always goes over...
I can't seem to get the text inside the button to centre properly; especially horizontally. The '+ / -' button is a good example. I've set the text-align as center and both the justify-items and align-items are center. I know those last two refer to the button items themselves within the grid. But I can't see where else to get the text to centre properly.
I'm hoping this is something outright simple and I've just been staring at the same code, over and over again, for oh too many hours.
If you would rather not correct my code and prefer to point me to any online examples or explanations which would help I will gladly do my homework.
Thanks!
The issue is the grid-gap:2%. It's working for horizontally because we can resolve the 2% based on the width but for the height it won't work since there is no height defined. Basically, the browser is first calculation the height without the gap, then the gap is addedd.
You should consider px or another unit like vw/vh for this one. I have also changed the way you are centring the button. (Centering in CSS Grid)
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 1vw;
padding: 1vw; /*make the padding the same*/
}
div.calc>button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
/*to center*/
display: flex;
align-items: center;
justify-content: center;
/**/
}
/*keep the ratio*/
div.calc>button:before {
content: "";
display: inline-block;
padding-top: 100%;
}
/**/
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
Alternative solution with flexbox method with three column button box. I hope this will be helpful for you.
* {
box-sizing: border-box;
position: relative;
}
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
/* display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center; */
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
height: 0;
padding: 12%;
flex-grow: 1;
width: 31%;
height: 31%;
margin: 5px;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
shouldn't the flex items of the .center-section-container be closer together when this property is use? they doesn't seem to be affected all.
i'm using flex wrap so the items are now in different lines but two far away to each other, I would like them to be closer on the cross axis.
here is what i have done:
body {
border: solid orange;
width: 100vw;
height: 100vh;
color: lightgrey;
}
.main-container {
border: solid black;
width: 100%;
max-width: 840px;
margin: 0;
display: flex;
}
.main-container>* {
border: solid pink;
}
.square {
min-height: 154.53px;
min-width: 171.53px;
border-radius: 10px;
background-color: #555;
}
/**here I have the problem**/
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.center-section-container>* {
border: solid yellow;
}
.text1 {
color: black;
}
.subtext {
flex-basis: 60%;
}
.button-grey,
.button-white {
border-radius: 5px;
flex-basis: 40%;
height: 50px;
}
.button-grey {
background-color: grey;
color: white;
}
.button-white {
border: solid grey;
background-color: white;
color: inherit;
}
.aside {
width: 200px;
}
<article class=main-container>
<div class="square"></div>
<section class="center-section-container">
<h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
<h4 class="subtext">Fisioterapia general </h2>
<button class="button-grey" type="button" name="button">Reservar
</button>
<button class="button-white" type="button" name="button">Pedir
</button>
</section>
<aside class="aside">
<h3 class="valoraciones"> 24 valoraciones </h3>
<div class="number-container">
<div class="number">8,9</div>
</div>
<a class="comentarios" href="#"> ver comentarios</a>
<a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
</a>
</aside>
</article>
I am not 100% sure if you mean this, but in order to have less vertical distance between the flex items, you need to remove the default margin of the h1 and h4 tags (BTW, you have a typo in the closing h2/h4 tag).
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
I added margin: 0 to the child elements which moves them closer together. This alone would align the flex items at the top of their container, and I understood you want them in the vertical middle, so I also added / changed align-content: center; for the container. HTH
body {
border: solid orange;
width: 100vw;
height: 100vh;
color: lightgrey;
}
.main-container {
border: solid black;
width: 100%;
max-width: 840px;
margin: 0;
display: flex;
}
.main-container>* {
border: solid pink;
}
.square {
min-height: 154.53px;
min-width: 171.53px;
border-radius: 10px;
background-color: #555;
}
/**here I have the problem**/
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
.text1 {
color: black;
}
.subtext {
flex-basis: 60%;
}
.button-grey,
.button-white {
border-radius: 5px;
flex-basis: 40%;
height: 50px;
}
.button-grey {
background-color: grey;
color: white;
}
.button-white {
border: solid grey;
background-color: white;
color: inherit;
}
.aside {
width: 200px;
}
<article class=main-container>
<div class="square"></div>
<section class="center-section-container">
<h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
<h4 class="subtext">Fisioterapia general </h4>
<button class="button-grey" type="button" name="button">Reservar
</button>
<button class="button-white" type="button" name="button">Pedir
</button>
</section>
<aside class="aside">
<h3 class="valoraciones"> 24 valoraciones </h3>
<div class="number-container">
<div class="number">8,9</div>
</div>
<a class="comentarios" href="#"> ver comentarios</a>
<a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
</a>
</aside>
</article>
I'm making a simple calculator page but I'm having a lot of trouble aligning the buttons the way I would like. I have all of my buttons inside of a div which is already the width I want each row of buttons to be. My problem is that no matter how I try to do the margins or the buttons either have extra room on the right side and they don't line up with the right side of the viewport or they are too big and they overflow onto the next line. I'm sure there is a simple solution to this but I'm too much of a beginner to see it. :(
Currently my CSS for the button container and buttons is as follows:
#buttons {
width:525px;
margin-left: 25px;
margin-top: 10px;
}
button {
width: 110px;
height: 110px;
border: 2px solid black;
border-radius: 20px;
margin: 10px 0px 0px 0px;
}
Codepen here.
Try width: 33% on the buttons. It tells the browser to use (roughly) 1/3rd if the available space for each button.
Flex box is worth learning.
Changes are noted with /**/ in the CSS.
Full example, https://codepen.io/anon/pen/LOZEPp
CSS
body {
background-color: #141414;
font-family: 'Rubik', sans-serif;
display: flex; /**/
justify-content: center; /**/
padding: 0; /**/
margin: 0; /**/
}
#calc-main {
background-color: #607466;
width: 550px; /**/
height: 700px; /**/
border: 3px solid black;
border-radius: 20px;
display: flex; /**/
flex-direction: column; /**/
justify-content: space-around; /**/
}
#calc-brand {
flex: 1; /**/
background: yellow;
text-align: center;
padding: 0; /**/
margin: 10px; /**/
}
#calc-viewport {
flex: 1; /**/
margin: 10px; /**/
font-size: 2em;
background-color: #D4D2A5;
padding: 0.25em; /**/
text-align: right;
border: 2px solid black;
border-radius: 20px;
}
#buttons {
margin: 10px; /**/
flex: 16; /**/
background: orange; /**/
display: flex; /**/
flex-direction: column; /**/
align-items: center; /**/
padding: 5px; /**/
}
.button-row { /**/
flex: 1; /* important */
background: yellow;
width: 100%; /**/
margin: 5px; /**/
display: flex; /**/
flex-direction: row; /**/
justify-content: space-between; /**/
}
button {
flex: 1; /* important */
max-width: 110px; /**/
max-height: 110px; /**/
border: 2px solid black;
border-radius: 20px;
margin: 10px; /**/
}
HTML
<body>
<div id='calc-main'>
<h1 id='calc-brand'>JAVASCRIPT CALCULATOR</h1>
<div id='calc-viewport'>
<p id='main-output'>0</p>
<p id='secondary-output'>0</p>
</div>
<div id=buttons>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
</div>
</div>
</body>
Try This:
.wrapper {
border: 1px solid #000;
text-align: center;
display: inline-block;
background-color: #607466;
}
.result {
margin:10px 20px;
}
input {
height: 20px;
border: 1px solid;
outline: none;
width: 100%;
background: yellow;
}
span {
background: #AAA;
width: 60px;
height: 60px;
display: inline-block;
margin: 0 20px 10px 10px;
line-height: 60px;
float: left;
cursor: pointer;
background: #FFF;
border: 1px solid;
}
span:hover {
background-color: #AAA;
}
.result ~ p {
padding-left: 10px;
clear: both;
}
<div class="wrapper">
<p class="result"><input type="text" name="result"></p>
<p><span>AC</span><span>CE</span><span>/</span><span>*</span></p>
<p><span>7</span><span>8</span><span>9</span><span>-</span></p>
<p><span>4</span><span>5</span><span>6</span><span>+</span></p>
<p><span>1</span><span>2</span><span>3</span><span>=</span></p>
<p><span>0</span><span>.</span><span>Invisible</span></p>
<br style="clear: both">
</div>
I have a two column flexbox layout. However, sometimes there is only one column, in which case the column should be aligned to the right. Currently the column is aligned to the left.
https://codepen.io/sleepydada/pen/rzVRxL
HTML:
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer">first answer</div>
</div>
SCSS:
* {
box-sizing: border-box;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&:first-of-type {
background: #ccc;
}
.answer {
background: crimson;
margin: 20px 0;
border: 1px solid blue;
flex: 0 0 33.3333%;
}
}
You can add this CSS:
.answer:only-of-type {
margin-left: auto;
}
From MDN
The :only-of-type CSS pseudo-class represents an element that has no
siblings of the same type.
codepen
* {
box-sizing: border-box;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.answers:first-of-type {
background: #ccc;
}
.answers .answer {
background: crimson;
margin: 20px 0;
border: 1px solid blue;
flex: 0 0 33.3333%;
}
.answers .answer:only-of-type {
margin-left: auto;
}
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer">first answer</div>
</div>
You can add an invisible div with height set to 0
* {
box-sizing: border-box;
}
.invisible {
height: 0;
border: none !important;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.answers:first-of-type {
background: #ccc;
}
.answers .answer {
background: crimson;
margin: 20px 0;
border: 1px solid blue;
flex: 0 0 33.3333%;
}
<div class="answers">
<div class="answer">first answer</div>
<div class="answer invisible"><!--invisible div--></div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer invisible"><!--invisible div--></div>
<div class="answer">first answer</div>
</div>