Menu
I have this flexbox that is used to vertically centre two lines of text. The two lines of text are too far apart. Here is an image of what I'm talking about:
Here is my code:
CSS
.vertical-center {
min-height: 100%; /* Fallback for vh unit */
min-height: 100vh; /* You might also want to use
'height' property instead.
Note that for percentage values of
'height' or 'min-height' properties,
the 'height' of the parent element
should be specified explicitly.
In this case the parent of '.vertical-center'
is the <body> element */
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
flex-wrap: wrap;
}
p.white, h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
color: white;
}
.flexbox-text {
margin: -50px, 0px, -50px, 0px;
}
html
<div class="vertical-center">
<h1 class="text-center white flexbox-text">{{mottoText}}</h1>
<h3 class="text-center white flexbox-text">{{mottoSubText}}</h3>
</div>
Ignore the angular two syntax. How do I get the two lines of text to be closer to each other?
906
Use flex-direction: column and remove margins from h1 and h3
.vertical-center {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
}
p.white, h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
color: black;
margin: 0;
}<div class="vertical-center">
<h1 class="text-center white flexbox-text">THIS IS TITLE</h1>
<h3 class="text-center white flexbox-text">SUBTITLE</h3>
</div>When positioning a single line in the cross axis of a flex container, you can use align-items.
But when the container has multiple lines – such as when flex items wrap – the align-content property becomes necessary to shift lines.
8.4. Packing Flex Lines: the
align-contentpropertyThe
align-contentproperty aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to howjustify-contentaligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.
The reason why "the two lines of text are too far apart" on your web page is because the initial value of align-content is stretch, which causes the lines to spread across evenly in the flex container.
Try different values on align-content for different alignments. For example, align-content: center brings both lines together in the center of the container.
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
width: 100%;
justify-content: center;
flex-wrap: wrap;
align-content: center; /* NEW */
}
p.white,
h1.white,
h2.white,
h3.white,
h4.white,
h5.white,
h6.white {
color: black;
}
.flexbox-text {
margin: -50px, 0px, -50px, 0px;
}<div class="vertical-center">
<h1 class="text-center white flexbox-text">MINIMISE WASTE. SUSTAINABLE LIVING. SUPPORT COMMUNITY</h1>
<h3 class="text-center white flexbox-text">SHARE FOOD WITH OTHERS IN YOUR AREA</h3>
</div>Edit: downvote?! I'm answering the question...
Seems simple to me... https://jsfiddle.net/krL755h8/ Probably line-height, padding or margin or incorrect use of flexbox causing the issue.
html {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
