I'm trying to align the baselines of 2 different div. the First div contains an H1 text while the other contains an H4. I have a border at the bottom for reference point.
.row {
display: flex;
}
.col {
display: block;
margin-left: 20px;
margin-right: 20px;
}
<div class="row">
<div class="col">
<h1>Title/Header</h1>
</div>
<div class="col">
<h4>Subheader</h4>
</div>
</div>
Illustration
Use flex properties for this.
.row {
display: flex;
}
.col {
display: flex;
flex: 1;
margin-left: 20px;
margin-right: 20px;
height: 300px;
background: yellow;
flex-direction: column;
justify-content: flex-end;
}
h1, h4 {
margin: 0;
}
h4 {
text-align: right;
}
<div class="row">
<div class="col">
<h1>Title/Header</h1>
</div>
<div class="col">
<h4>Subheader</h4>
</div>
</div>
start with something like the code below. Margins and line height can change things. To make sure position absolute text does not go out of the parent box, you have to set that parent box to position relative
.row {
display: flex;
}
.col {
display: block;
margin-left: 20px;
margin-right: 20px;
height: 180px;
width: 180px;
background-color: yellow;
position: relative;
}
h1 {
display: inline-block;
position: absolute;
line-height: 20px;
bottom: 0px;
right: 0px;
margin: 0;
}
h4 {
display: inline-block;
position: absolute;
line-height: 10px;
bottom: 0px;
right: 0px;
margin: 0px;
}
<div class="row">
<div class="col">
<h1>Title/Header</h1>
</div>
<div class="col">
<h4>Subheader</h4>
</div>
</div>
Related
This seems like an easy question but I've been trying to fix it for a couple of hours now and I still cannot find a solution. I have a box with two columns like in here:
p {
margin: 0;
padding: 0;
margin-right: 2px;
}
.container {
padding: 5px;
width: 90%;
height: 200px;
margin: auto;
border: 1px black solid;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
.half {
width: 50%;
}
.left-col {
display: flex;
}
.right-col {
text-align: right;
}
.tooltip {
position: relative;
border: 1px black solid;
border-radius: 100%;
width: 14px;
height: 14px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="row">
<div class="half">
<div class="left-col">
<p>Username picked on regitration:</p>
<div class="tooltip">?</div>
</div>
</div>
<div class="half">
<p class="right-col">
John WithLongSurname
</p>
</div>
</div>
</div>
The problem is, that when I open the page on mobiles, the text on the left column is too long and it wraps (which is good), but its width still takes a whole column, so the tooltip is not next to the text but in the center of the box (it sticks to the right side of the column). Example:
I tried to add width: min-content to the "label" class, but then the whole paragraph just collapses to the smallest possible width. How can I adjust the width of the paragraph, so it will take only as much width as it needs to, so the tooltip will always be next to it?
It is because you are using display: flex; for the .left-col class. By default it will distribute the width automatically and evenly.
Try the styling below to see if it works:
p {
margin: 0;
padding: 0;
margin-right: 2px;
}
.container {
padding: 5px;
width: 90%;
height: 200px;
margin: auto;
border: 1px black solid;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
.half {
width: 50%;
}
.left-col {
display: inline;
}
.right-col {
text-align: right;
}
.tooltip {
position: relative;
border: 1px black solid;
border-radius: 100%;
width: 14px;
height: 14px;
font-size: 12px;
display: inline;
}
p.label {
width: auto;
}
<div class="container">
<div class="row">
<div class="half">
<div class="left-col">
<p class="label">Username picked on regitration:
<span class="tooltip">?</span>
</p>
</div>
</div>
<div class="half">
<p class="right-col">
John WithLongSurname
</p>
</div>
</div>
</div>
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
As you can see in the snippet below, I have a .square-container which is positioned absolutely and it contains a square. I'm trying to vertically position the .square-container in the center of the parent div.
.container {
position: relative;
background-color: blue;
}
.square-container {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
}
.square {
width: 100%;
height: 100%;
background-color: red;
}
.hello {
padding: 15px;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class="square-container">
<div class='square'></div>
</div>
</div>
For positioning absolute elements in the middle use top: 50%
And then use transform: translateY(-50%); and its centered
.container {
position: relative;
background-color: blue;
}
.square-container {
position: absolute;
right: 10px;
top: 50%;
height: 30px;
width: 30px;
transform: translateY(-50%);
}
.square {
width: 100%;
height: 100%;
background-color: red;
}
.hello {
padding: 15px;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class="square-container">
<div class='square'></div>
</div>
</div>
.container{
display:flex;
align-items:center;
}
You wouldn't need absolute positioning here. If you set the container as a flex wrapper, you won't also need to position it relatively and can get rid of the square-container div as well that currently wraps the div.square element.
To push the square to the right, we could
A) use auto-margins inside the flex layout. So all that our div.square needs, is margin-left: auto, which tells the browser to push it as far as possible from its left siblings.
B) Use justify-content: space-between on our container. This tells the flex container to space out the elements to the sides.
The approaches differ very slightly and don't really matter in this example until we start adding more elements.
An updated example:
A
.container {
display: flex;
align-items: center;
background-color: skyblue;
padding: 15px;
}
.square {
height: 30px;
width: 30px;
margin-left: auto;
background-color: tomato;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class='square'></div>
</div>
B
.container {
display: flex;
align-items: center;
justify-content: space-between;
background-color: skyblue;
padding: 15px;
}
.square {
height: 30px;
width: 30px;
background-color: tomato;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class='square'></div>
</div>
I want align the div horizontally.
.d1 {
margin-left: 1rem;
margin-right: 1rem;
font-size: 0;
text-align: justify;
}
.d1::after {
content: '';
font-size: 0;
line-height: 0;
height: 0;
width: 100%;
display: inline-block;
}
.dd {
display: inline-block;
position: relative;
font-size: initial;
}
<div class="d1">
<div class="dd">aa</div>
<div class="dd">bb</div>
</div>
but it can not justify the div and align is left. Why?
Please specify how you want to align the div's along the horizontal axis.
For now, I have aligned them adjacent to each other on the left side.
<div class="d1">
<div class="dd">aa</div>
<div class="dd">bb</div>
</div>
.d1 {
display: flex;
}
.dd{
margin: 1rem; //to provide space in between
}
I want my images next to each other with a little margin in between. But when I do `margin-right: 10px; on each div the last image wont align with my title bar.
How can I give the divs a space in between without having a space on the right of the last div?
Note: The content is dynamic, so I cant make a div to hold the 4 divs.
There are many ways you can do, I'll just show one of them.
EDIT 1: solution for multiple rows by using nth-child
DEMO: http://jsfiddle.net/s0xLfcrx/1/
HTML:
<div class="bar"></div>
<div class="box">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
</div>
CSS:
.bar, .box {
width: 460px;
}
.bar {
background: lime;
height: 20px;
}
.box {
text-align: center;
font-size: 0;
}
.box > div {
display: inline-block;
font-size: 16px;
background: gold;
width: 100px;
margin: 0 10px;
}
.box > div:nth-child(4n+1) {
margin-left: 0;
}
.box > div:nth-child(4n) {
margin-right: 0;
}
ORIGINAL DEMO (for only 1 row):
http://jsfiddle.net/s0xLfcrx/
You could use justify-content: space-between. This creates even spacing inbetween each of the image containers and pushes the first and last element to the edges of the parent div.
Your html:
.container {
width: 346px;
}
.title-bar {
background-color: #ccc;
width: 100%;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.space-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.image-container {
background: #ccc;
padding: 5px;
width: 60px;
height: 50px;
margin: 0;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="container">
<div class="title-bar">
<h1>Title</h1>
</div>
<div class="flex-container space-between">
<div class="image-container">1</div>
<div class="image-container">2</div>
<div class="image-container">3</div>
<div class="image-container">4</div>
</div>
</div>
The styling for the image-containers in the code above is just an example - if you have an unknown number of divs loading you either fix the width, or make them fluid and the container width will need to be fluid (unless you want it fixed of course).
you could do something like this with variable widths:
.titlebar {
width: calc(100% - 2px);
display: block;
height: 40px;
background: blue;
}
.item25 {
width: calc(25% - 11px);
height: 80px;
display: inline-block;
background: black;
margin-right: 10px;
}
.no-margin {
margin-right: 0;
}
<div class="titlebar"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25 no-margin"></div>
Just use simple CSS
.div { width: 25%; text-align: center; padding: 5px; box-sizing: border-box; }
.div img { display: block; margin: 0 auto; }
There are many ways to do but if you need RESPONSIVE for this then use this solution:
body{font-family:arial;}
h1{
display:block;
margin:0px;
padding:0px;
background:#0af;
color:#fff;
text-align:center;
}
.layer{
display:block;
overflow:auto;
}
.layer > div{
display:block;
float:left;
margin:10px 10px 10px 0px;
width: -moz-calc(25% - 7.5px);
width: -webkit-calc(25% - 7.5px);
width: calc(25% - 7.5px);
background-color:#000;
height:30px;
}
.layer > div:nth-child(4n) {
margin-right: 0;
background-color:#f00;
}
<h1>Title bar</h1>
<div class="layer">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div>
</div>