CSS

基本はこれで設定します。

丁度真ん中に線をそろえるのは、top: 50% で半分にして、transform: translateY(-50%) で戻すところなのかもしれないです。 HTMLで確認はこちら border でドットもできそうです。

こんな感じです。ポチは padding-left の所に border-radius で描いています。 画面を狭くすると折り返されます。整列されています。