html,css 縦の中央寄せと横の左右寄せの併用

実現したいこと
子要素を全てvertical-alignで縦の中央寄せ
子要素1.2を左寄せ
子要素3を右寄せ

現状
下記のコードで子要素3が右寄せになりません。
3つの子要素を縦の中央寄せをしつつ、
子要素3を右寄せにする方法をご教授下さい。
宜しくお願いします。

HTML
1<div class="parent">
2	<span class="text-wrapper">
3		<a class="children1">children1</a>
4		<a class="children2">children2</a>
5	</span>
6		<img class="children3"src="children3.gif">
7</div>
8

CSS
1
2.text-wrapper{
3	vertical-align:middle;
4}
5
6
7.children1{
8	margin:auto;
9}
10
11.children2{
12	margin:auto;
13}
14
15.children3{
16	text-align:right;
17	vertical-align:middle;
18}
19
20

m.ts10806

2018/02/08 01:39 編集

何が影響しているか分からないのでparent,text-wrapperの指定もご提示願います。

imuzi.ayustet

2018/02/08 02:25 編集

追記しました。ご確認お願いします。

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

回答3件

CSS
1.parent {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5}

投稿2018/02/08 03:18

x_x

総合スコア13749

CSS
1.parent {
2  border: 2px solid;
3  width: 500px;
4  height: 200px;
5  position: relative;
6}
7
8.parent > * {
9  position: absolute;
10  top: 0;
11  bottom: 0;
12  margin: auto 0;
13}
14
15.text-wrapper {
16  border: 1px solid;
17  height: 20px;
18  left: 10px;
19}
20
21.parent img {
22  right: 10px;
23}
24
25
26

投稿2018/02/08 02:00

root_jp

総合スコア4666

ベストアンサー

imgタグにtext-alignは効きません。

HTML
1<div class="parent">
2	<div class="parent-inner">
3		<span class="text-wrapper">
4			<a class="children1">children1</a>
5			<a class="children2">children2</a>
6		</span>
7		<img class="children3" src="children3.gif">
8	</div>
9</div>

まず、中央寄せにflexを使い、（ここでは「.parent-inner」の要素を追加しています）
floatで横のレイアウト整えるのがいいと思います。

CSS
1	/* 上下中央にする */
2	.parent {
3		align-items: center;
4		display: -webkit-flex;
5		display: flex;
6	}
7
8	/* 横のレイアウト */
9	.parent-inner {
10		overflow: hidden;
11		width: 100%;
12	}
13	.text-wrapper {
14		float: left;
15	}
16	.children3 {
17		float: right;
18	}
19