I have this <h4> tag:
<h4>
A Java and Kotlin coder.
</h4>
which has this CSS applied to it (inherited from body):
body {
font-family: jetbrains-mono;
background-color: #444;
color: #EEEEEE;
font-size: 18px;
max-width: 650px;
line-height: 1.2;
display: grid;
align-items: center;
margin: auto auto;
}
Here is the result:
using just align-content: center yields the same result.
Problem is, if I use a flexbox to center the text instead of a grid, like this:
display: flex;
align-items: center;
justify-content: center;
this is what happens:
How can I fix this?
the full html file is here: https://github.com/TheOnlyTails/theonlytails.com/blob/main/index.html
and the full css file is here: https://github.com/TheOnlyTails/theonlytails.com/blob/main/style.css
For this to become a column you need the flex-direction: column; property. Add it to the container to which you added the display: flex property like so:
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
I hope this fixes your problem.
My site working well on all browsers and devices -- with the exception of Google Chrome on a large screen, which applies a margin-top of somewhere around 200-300px. I have been trying to debug using the Chrome Console but I haven't seen any differences in the source code. Has anyone else experienced this? Below is the spacing for the elements in question.(Chrome Error)(Firefox Working)(View Page Here)
.column {
flex: 50%;
display: flex;
/*height: 100vh;*/
justify-content: center;
align-items: center;
}
.colone {
height: 100vh;
justify-content: center;
align-items: center;
}
I have editable content div with emojiareaone integrated
To center the content i used
{
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
text-align: center;
}
it displays test in right positions but
all emojis tags in separate rows
is there any way to display as it was entered
You Can try This .
emoji-tag {
display:inline-block;
float:left;
}
I have a menu with list item displayed in a vertical list using flexbox and flex-direction:column.
It's working great in all browsers except for IE and Edge.
I tried tricks like adding display flex to the flex container but it's not working either.
Any ideas ?
Here's the website where the problem happens : http://lesdeuxvagues.com/demo
Click the plus button in the menu to see the problem
CSS:
ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
Turns out i just fixed the issue by adding display:block; to my list items.
They had a display:table-cell from the foundation framework that might have caused this problem!
All of the flexbox tutorials that I've seen so far say that vertical align is done by using align-items and justify-content and setting both to center; however that doesn't seem to be working, as you can see below (I'm trying to align the lorem ipsum text). The browser I'm using is Chrome, if that matters.
Here's a codepen: http://codepen.io/anon/pen/QjBrEm
I've tried a lot of the suggestions here on Stack Overflow, for example:
body, html:
height: 100%
These don't seem to work.
Your SASS should be:
.initial
background-color: #212121
color: #ffffff
display: flex
align-items: center
justify-content: center
to align the content of that element as flexbox layout is not inherited by children.
Codepen Demo
When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.
So if you're trying to center the <p> text, you'll notice the <p> is a child of <section>, which is a flex item but not a flex container.
You'll need to make <section> a (nested) flex container so that flex properties apply to the <p>.
Try this:
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
DEMO: http://codepen.io/anon/pen/xwJjvO
You have laid out the sections inside of the container using flexbox, and as shown on Codepen this gives the result that all three sections are shown below each other.
The text in the first section is inside section.initial, which is not laid out using flexbox, as that was only specified on the parent. Therefore, the text is just placed according to the default padding and the text-align you entered.
To get the text centered in the section, also start using flexbox layout in that section.
Since you are aligning the paragraph inside the section element, you need to use the flexbox properties on section(parent). Flexbox properties on #mainpage-container will not have effect on the grandchild p as it is not inherited by the parent i.e. section element.
#mainpage-container section.initial {
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
}
#mainpage-container .initial {
background-color: #212121;
color: #ffffff;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container .initial #logo {
height: 15rem;
width: auto;
}
<div id="mainpage-container">
<section class="initial">
<!--<img src="/assets/k.png" id="logo">-->
<p>Lorem ipsum.</p>
</section>
<section>
</section>
<section>
</section>
</div>