Flexbox horizontale vyravnivanie?

How to align center horizontally only one element inside of a flex container?

https://jsfiddle.net/qz48nbwe/17/
March 12th 20 at 08:07
6 answers
March 12th 20 at 08:09
Solution
Added lines of code in this link
.slogan {
 color: #fff;
 font-size: 28px;
display:block;
 width: 100%;
text-align:center;
position:absolute;
}
March 12th 20 at 08:11
Solution
By all means make it a three-column, content middle centarui. Having only two columns, you will not have one of them in the center, not tearing it the same position: absolute.
This type of crutches to insert? - Reynold57 commented on March 12th 20 at 08:14
The crutch in this situation is to position absolute. If you use Flex, it begs three columns, this is the expected solution, the simplest and most canonical. - roxanne_Tromp9 commented on March 12th 20 at 08:17
March 12th 20 at 08:13
Solution
Here it is: https://jsfiddle.net/7d0fwpmc/
But if the width of the logo is unknown, the absolute.

If suddenly in the center of the remaining space https://jsfiddle.net/u13tmyhj/
March 12th 20 at 08:15
Solution
.header {
 align-items: flex-start;
}
.slogan {
 align-self: center;
}
not so. it is necessary that the center was in the center horizontally, but not vertikale - Reynold57 commented on March 12th 20 at 08:18
Not knowing the dimension of the mesh, do not tell. Such tasks easier to decide not to flex - Jonas_Gusikowski61 commented on March 12th 20 at 08:21
@Jonas_Gusikowski61, and what such problems easier to solve? - Reynold57 commented on March 12th 20 at 08:24
well, or just rip a logo from a thread on absolute time: https://codepen.io/anon/pen/vVxqBm - Jonas_Gusikowski61 commented on March 12th 20 at 08:27
March 12th 20 at 08:17
Solution
You can add a pseudo-element in .header:
.header::after {
 content: "";
 display: block;
 width: 174px;
}
March 12th 20 at 08:19
Solution
.slogan {
color: #fff;
font-size: 28px;
margin-right: 30%/*!!!!!!!!!!!!!!!!!!!!!!!!*/
}

Find more questions by tags FlexboxLayoutHTMLCSS