中央揃えのレイアウトに、divの要素を回り込ませたい

上記のように、divの要素（中央揃えにスタイルをしていされている）を、先書かれたdivに回り込ませて表示させたいです。
よろしくお願いいたします。

HTML
1<html>
2<style>
3    <!--
4    div.outer {
5        display: table;
6        width: 100%;
7    }
8    div.inner {
9        text-align: center;
10    }
11    div.block {
12        border-style: solid;
13        display: inline-block;
14        vertical-align: middle;
15        text-align: center
16    }
17    p.text{
18        width: 200px;
19        line-height: normal;
20
21    }
22    -->
23</style>
24<body>
25<div class="outer">
26    <div class="inner">
27        <div class="block"><p class="text">１</p></div>
28        <div>↓</div>
29        <div class="block"><p class="text">２</p></div>
30
31        <div style="display: flex; align-items: center; justify-content: center ">↓</div>
32        <div style="display: flow">[矢印]の横に配置</div>
33
34        <div class="block"><p class="text">３</p></div>
35        <div>↓</div>
36        <div class="block"><p class="text">４</p></div>
37    </div>
38</div>
39</body>
40</html>

m.ts10806

2018/07/11 05:50 編集

このままでは丸投げ質問（非推奨質問の代表格です）となってしまうので、自身が調べていく中でやってみたコードをご提示ください。その上で「何が」「どう」分からなかったのか記載してください。 https://teratail.com/help/question-tips

m.ts10806

2018/07/11 05:59

（2回目）自身が調べていく中でやってみた”コード”をご提示ください。　https://teratail.com/help/avoid-asking >コードをください・デバッグしてください等の丸投げの質問

macaron_xxx

2018/07/11 06:03

１，２，↓、①、②が何を指してるのかまったく意味不明です。

macaron_xxx

2018/07/11 06:14

HTML、CSSを大幅に直さないと実現できなさそうですが、最終形態がどういう形なのかが見えないので、提示できそうにありません。例えば、提示してもらったコード中の４はどこにくるのでしょうか？そこあたりも含めて具体的な要件にしてください。

退会済みユーザー

2018/07/11 06:17

divで囲った「↓」の横に、divで囲った「[矢印]の横に配置」が来るイメージです。「↓」は中央ぞろえのため、真ん中に位置させて、そのうえで「[矢印]の横に配置」という文字が入力されたdivを横に回り込ませたいと思っています。

行動規範の内容に同意します

回答1件

ベストアンサー

おっしゃっている条件のみを実現しますね。

HTML
1<div class="outer">
2  <div class="inner">
3    <div class="block"><p class="text">１</p></div>
4      <div class="arrow">↓</div>
5      <div class="block"><p class="text">２</p></div>
6      <div class="arrow">↓
7          <div class="side">[矢印]の横に配置</div>
8      </div>
9    <div class="block a"><p class="text">３</p></div>
10    <div>↓</div>
11    <div class="block"><p class="text">４</p></div>
12  </div>
13</div>

css
1div.outer {
2  display: table;
3  width: 100%;
4}
5div.inner {
6  text-align: center;
7}
8div.block {
9  border-style: solid;
10  width: 200px;
11  margin: 0 auto;
12  text-align: center
13}
14p.text{
15  width: 200px;
16  line-height: normal;
17
18}
19.arrow {
20  position: relative;
21  width: 200px;
22  margin: 0 auto;
23  overflow: visible;
24}
25.side {
26  position: absolute;
27  top: 0;
28  right: -50%;
29}