２つの段落を真横、中心に並べたい。

２つの段落を真横、中心に並べたいです。
現状左側にぴったりと寄ってしまいます。
どうしたら２つの並べた要素をセンタリングできますでしょうか？
よろしくお願いいたします。

HTML
1  <div class="centering">
2    <div class="txt-left">
3        <img src="img/img.jpg">
4        <br>
5        <p>
6            txttxttxttxttxttxt<br>
7            txttxttxttxttxttxt<br>
8            txttxttxttxttxttxt<br>
9            txttxttxttxt<br>
10        </p>
11    </div>
12    
13    <div class="txt-right">
14        <p>
15            <h1>titletitletitle</h1>
16            txttxttxttxttxttxt<br>
17            txttxttxttxttxttxt<br>
18            txttxttxttxttxttxt<br>
19            txttxttxttxt<br>
20        </p>
21    </div>
22  </div>

CSS
1
2    .centering {
3	display: block;
4	margin:0 auto;
5	}
6
7    .txt-left {
8	float:left;
9	}
10
11    .txt-right {
12	display:block;
13        margin-left: 30px;
14	}
15	
16

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

回答1件

このように行うのはいかがでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .centering {
13            display: table;
14            margin: 0 auto;
15            width: 80%;
16        }
17
18        img {
19            width: 100%;
20            height: auto;
21        }
22
23        .box1, .box2 {
24            display: table-cell;
25            vertical-align: top;
26        }
27
28        .box1 {
29            border-right: solid 30px transparent;
30        }
31
32        .box2 {
33            background-color: #ff3d3d;
34            padding: 10px;
35        }
36    </style>
37</head>
38<body>
39<div class="centering">
40    <div class="box1">
41        <img src="https://placehold.jp/3d4070/ffffff/200x150.png?text=image"
42             alt="">
43        <span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span>
44    </div>
45    <div class="box2">
46        <p>
47            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
48        </p>
49    </div>
50</div>
51</body>
52</html>