A
• section class="flex01 + h_align_t_50" (display:inline-flex; border:2px dotted teal; min-height:110px; min-width:95%;)(position:relative; left:50%; transform:translate(-50%,0);) • div class="v_align pw5" style="height:70%; width:90%; margin:auto;"" • div class="v_align pw6" style="width:90%; border:2px solid dodgerblue; margin:auto; padding:20px 20px 30px; background:white; text-align:center; border-radius:7px;" ‹code›‹txt1›Overlay‹/txt1› hr/ hr_10 position:relative; top:50%; transform:translate(0,-50%);‹/code›

position:relative; top:50%; transform:translate(0,-50%);
B
• section class="flex01 + h_align_t_50" (display:inline-flex; border:2px dotted teal; min-height:110px; min-width:95%;)(position:relative; left:50%; transform:translate(-50%,0);) • div class="v_align" style="height:70%; width:90%; margin:auto;"" • div class="v_align" style="width:90%; border:2px solid dodgerblue; margin:auto; padding:20px 20px 30px; background:white; text-align:center; border-radius:7px;" # ‹code›‹txt1›Overlay‹/txt1› position:relative; top:50%; transform:translate(0,-50%);‹/code›

position:relative; top:50%; transform:translate(0,-50%);
C
flex1 (no min-width)

position:relative; top:50%; transform:translate(0,-50%);
0
1
Block:
.h_align + .flex0·display:inline-flex; min-width:90%;|.block·vertical-align:middle; margin:auto;| .block:before {content:”; display:inline-block; height:100%;E
2
Block0 ‹h4 notOK› Content simple
‹article class="flex0 h_align_t_50"›‹sticker›·‹/sticker› ‹section class="block0 h_align_t_50" style="height:60px!important; width:50%;">‹sticker›·‹/sticker›‹div class="centered0"›Block0 ‹h4 notOK› Content simple‹/div›‹/section›‹/article›3
Myblock2:
new section stays inline and accepts ‹h4›1st div |
4
1. flex0 h_align | pw5 v_align (top:50%; but no transform:translate(0,-50%);
5
2. Myblock2:
new section stays inline6
3. Block | Myblock2:
new section stays inline1st div |
7
4. Myblock2:
new section stays inline7
valign
.block:before {content:''; display:inline-block; height:100%; vertical-align:middle!important; margin-right:-0.25em;} css-tricks.com/centering-in-the-unknown/ The base line H posit° between all inline components reacts to the largest? font-size. Hence large fonts push around the base line.
1st div |
1st div |
Flex container2:
new section stays inline and accepts ‹h4›.flex1 {border:3px solid dodgerblue; display:inline-flex; margin:12px; padding:5px;}
‹section class="flex1"›

.container1 {display: flow-root; border:2px dotted grey; padding:1px;} .item1 {margin: 10px; float: left; border:1px solid grey; padding:10px;}

Caption
Inline-flex | inline-flex Edit post - id:84823
logo

img

img1

img2

img3

The images are defined in the page's ACF custom fields | Sourced from: "inline-flex" | ID: "84823"
▷2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.