Does anyone know how to align an <hr> element inside a flex-container. When I do flex-start all of the other elements align, apart from the <hr>. I need a solution that doesn't use position: absolute on the <hr> element because this affects the document flow and causes other issues.
codepen: https://codepen.io/emilychews/pen/QaPQaW
CSS
body {margin: 0; padding: 0;}
.box {
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
display: block;
background: white;
height: 3px;
width: 75px;
margin-left: 0 auto;
}
HTML
<div class="box">
<h1> Hello </h1>
<hr>
<p> Thanks </p>
</div>
The hr element has a default margin set, and in Chrome it is set to:
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
And as auto margin's in Flexbox override the justify-content/align-* properties, you need to remove it, which e.g. margin: 0; will, and make the in this case align-items: flex-start; be properly applied.
Stack snippet
body {margin: 0; padding: 0;}
.box {
color: white;
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
background: white;
height: 3px;
width: 75px;
align-self: flex-start;
margin: 0; /* added */
}
<div class="box">
<h1>Hello</h1>
<hr>
<p>Thanks</p>
</div>
Change your hr to
background: white;
height: 3px;
width: 75px;
margin-left: 0;
Related
Here below is my css and html code I try hard to make justify-content: space-between; but not working
the class .container is important I can't remove max-width, is there any solution to fix the problem I also use flex:auto , flex:0 0 auto to shrink or give adjustable space to the elements but nothing works for me
Any help is highly appreciated
.mega-wrap {
position: relative;
margin: 35px auto;
overflow: hidden;
}
.mega-wrap .container {
display: flex;
align-items: center;
justify-content: space-between;
align-content: center;
margin: 0 auto;
}
.container {
width: 100%;
max-width: 1145px;
margin: 0 auto;
padding: 0px;
box-sizing: border-box;
}
.dual-wrapper,
.max-wrapper {
position: relative;
display: block;
background: red;
color: #fff;
width: 50%;
overflow: hidden;
margin: 0 auto;
}
<div class="mega-wrap">
<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>
</div>
To avoid any confusion, I removed all your CSS code and tried to match with what you want.
.container {
background: red;
color: white;
display: flex;
justify-content: center;
}
.dual-wrapper, .max-wrapper {
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
}
<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>
I have three elements in a div which itself is in another div. I want the first two elements of the inner div to be centered in relation to the outermost div and stacked on top of each other, while the third element should be at the bottom in relation to the outermost div as well. This is a WordPress project, which I am new to, so I don't want to change any of the div or class structure, just style the existing classes. I would prefer Flexbox-only solutions.
Here's the html:
<div class="outerDiv">
<div class="innerDiv">
<p class="e1"> Centered element 1 </p>
<p class="e2"> Centered element 2 </p>
<p> Bottom element </p>
</div>
</div>
Here's the relevant CSS:
.outerDiv{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 90px 0 0 0;
box-sizing: border-box;
}
.innerDiv {
align-self: center;
margin: 30px 30px 30px 30px;
}
.e1 {
margin: 10px 0;
}
.e2{
margin: 10px 0;
}
.innerDiv {
/*...*/
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.e1 {
margin: 10px 0;
margin-top: auto;
}
.e2{
margin: 10px 0;
margin-bottom: auto;
}
Edit: Added width/height properties to .innerDiv
Welcome to Stackoverflow. I've updated this to meet your new requirements:
.outerDiv {
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
}
.innerDiv {
width: 50%;
height: 100%;
}
.e1 {
width: 100%;
height: 25%;
}
.e2 {
width: 100%;
height: 25%;
}
.e3 {
width: 50%;
height: 25%;
position: absolute;
bottom: 0;
}
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.
I have met some problems while doing a image-viewer project. The problem is that my buttons and the image are not following justify-content property, which they don't distributed equally inside my div block, how could it be solved? Also the image is not centered as the title does despite I set the align item property. I dow know how to fix that. I've searched over the website for solutions but none of them seems working.
Could anyone help me, please? Thanks in advance.
Here are the html and css code:
<div class="image-viewer__container">
<div class="image-viewer__title">Image Viewer</div>
<div class="image-viewer__main">
<div class="image-viewer__button"><img src="./images/back.png" id="previous" /></div>
<div class="image-viewer__display" style="background-image: url(./images/loading.gif);background-repeat: no-repeat; background-position: center;">
<img src="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" id="display">
<div class="image-viewer__display-source-wrapper">
<span><a href="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" target="_blank">
https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF</a>
</span>
</div>
</div>
<div class="image-viewer__button"><img src="./images/next.png" id="next" /></div>
</div>
</div>
.image-viewer__container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.image-viewer__title {
font-size: 5rem;
font-weight: 600;
color: #615dec;
margin: 0;
margin-top: 2rem;
}
.image-viewer__main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: auto;
}
.image-viewer__button {
display: inline;
background: none;
border: none;
border-radius: 50%;
}
.image-viewer__button img {
width: 80px;
height: 80px;
border: 1px solid transparent;
border-radius: 50%;
cursor: pointer;
}
.image-viewer__display {
position: relative;
padding: 15px;
margin: 3rem;
max-width: 80rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
font-size: 0.6rem;
}
.image-viewer__display-source-wrapper {
position: absolute;
font-size: 12px;
left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
min-width: 100em;
text-align: center;
bottom: 0;
}
#display {
object-fit: contain;
width: 50rem;
height: 30rem;
margin-bottom: 1rem;
}
#source {
display: inline;
color: black;
}
This is because you've set a fixed width to your image. By setting the main image to 100% the image will fit and fill up the remaining space so the 3 elements are always distributed equally.
main image size = full width - both your arrows
current
#display {
object-fit: contain;
width: 50rem; /*fixed width*/
height: 30rem; /*fixed width*/
margin-bottom: 1rem;
}
amended
#display {
margin-bottom: 1rem;
width: 100%; /*was added*/
height: auto; /*was added*/
}
jsFiddle
Add css float:"right" in css button.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 5 years ago.
I've been learning CSS and am now practicing by trying to replicate basic websites, but I've stumbled across a problem!
I'm trying to vertically align a box so that it is always in the middle, and will automatically scale if I make the browser vertically smaller. So far I've tried to replicate what I've done horizontally (normally margin: 0 auto;) but it isn't working.
My relevant HTML and CSS so far look like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global Values */
html{
font-family: "Arial";
font-size: 16px;
line-height: 1.2;
height: 100%;
}
body{
background-color: #f9f9f9;
height: 100%;
}
.container{
display: block;
min-width: 240px;
max-width: 768px;
width: 100%;
/*----------------------------------------------*/
/* This is to make sure that the container height is always the same size as the browser. */
min-height: 100px;
height: 100%;
/*----------------------------------------------*/
margin: 0 auto;
text-align: center;
border-style: solid;
}
header{
border: solid;
min-height: 100px;
margin: auto 5%;
}
<body>
<div class="container">
<header>
<h1>Jon Phillips</h1>
<p>User Interface Designer</p>
<nav class="contact">
<p>Contact</p>
</nav>
</header>
</div>
</body>
I'm showing the borders so I can see what's going on, and am sure that (like horizontal centering) my margins need to be automatic. When I've done this horizontally, it's worked fine...
Does anyone have a recommendation on what to do??
Thanks in advance!
Flexbox is your friend! You need to add the following to your container styles
display: flex;
align-items: center;
justify-content: center;
We're setting the display to flex/flexbox with display: flex; and aligning everything to the center with align-items: center; and justify-content: center;
With all the vendor-prefixes it looks like:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global Values */
html{
font-family: "Arial";
font-size: 16px;
line-height: 1.2;
height: 100%;
}
body{
background-color: #f9f9f9;
height: 100%;
}
.container{
display: block;
min-width: 240px;
max-width: 768px;
width: 100%;
/*----------------------------------------------*/
/* This is to make sure that the container height is always the same size as the browser. */
min-height: 100px;
height: 100%;
/*----------------------------------------------*/
margin: 0 auto;
text-align: center;
border-style: solid;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
header{
border: solid;
min-height: 100px;
margin: auto 5%;
}
<body>
<div class="container">
<header>
<h1>Jon Phillips</h1>
<p>User Interface Designer</p>
<nav class="contact">
<p>Contact</p>
</nav>
</header>
</div>
</body>
Check this: https://codepen.io/danieldd/pen/pdooVN
<div class="container">
<div class="item-centered"></div>
</div>
.container {
height: 400px;
width: 100%;
background-color: cyan;
display: flex; /*this is needed for centering*/
align-items: center; /*this center vertically childred elements*/
justify-content: center; /*this center horizontally childred elements*/
}
.item-centered {
height: 200px;
width: 200px;
background-color: red;
}
Sadly the auto margins trick only works horizontally. In CSS3, you can use another trick. You start with top: 50%; and then subtract half the height of your container using transform: translateY(-50%);. The perspective(1px) is just to correct the calculation to a whole pixel and prevent issues in some browsers. See the three lines I've added to your CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global Values */
html {
font-family: "Arial";
font-size: 16px;
line-height: 1.2;
height: 100%;
}
body {
background-color: #f9f9f9;
height: 100%;
}
.container {
display: block;
min-width: 240px;
max-width: 768px;
width: 100%;
/*----------------------------------------------*/
/* This is to make sure that the container height is always the same size as the browser. */
min-height: 100px;
height: 100%;
/*----------------------------------------------*/
margin: 0 auto;
text-align: center;
border-style: solid;
}
header {
border: solid;
min-height: 100px;
margin: auto 5%;
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
<body>
<div class="container">
<header>
<h1>Jon Phillips</h1>
<p>User Interface Designer</p>
<nav class="contact">
<a href="mailto:jon#jonphillips.ca" target="_blank">
<p>Contact</p>
</a>
</nav>
</header>
</div>
</body>
On the parent of the item that you're trying to center, you can just use display: flex; and the child should center inside (with the rest of the styles that you already have set up).
This could also be achieved using absolute positioning, though it would be a few more lines:
.parent {
position: relative;
}
.child {
/* Vertically center - will still need left / right & width adjustment otherwise */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global Values */
html{
font-family: "Arial";
font-size: 16px;
line-height: 1.2;
height: 100%;
}
body{
background-color: #f9f9f9;
height: 100%;
}
.container{
display: block;
min-width: 240px;
max-width: 768px;
width: 100%;
display: flex;
/*----------------------------------------------*/
/* This is to make sure that the container height is always the same size as the browser. */
min-height: 100px;
height: 100%;
/*----------------------------------------------*/
margin: 0 auto;
text-align: center;
border-style: solid;
}
header{
border: solid;
min-height: 100px;
margin: auto 5%;
width: 100%;
}
<body>
<div class="container">
<header>
<h1>Jon Phillips</h1>
<p>User Interface Designer</p>
<nav class="contact">
<p>Contact</p>
</nav>
</header>
</div>
</body>
There are different approuces to solve this problem, the easyest and with a good compatibility is the use of the "table-cell display", so in your case adding this to your CSS:
.container {
display:table-cell;
height:100%;
vertical-align:middle
}
The point is that a correct implementation of a table-cell should consider the parent element as a table, your parent element is the body itself, so do change your CSS into:
body{
background-color: #f9f9f9;
height: 100%;
width:100%;
display:table
}
http://jsfiddle.net/9tghnydg/
On a second though the height propriety on the .container is not strictly necessary, acting it as the unique cell of the body table:
.container {
display:table-cell;
vertical-align:middle
}
http://jsfiddle.net/9tghnydg/1/