説明文と写真を横並びにして中央に寄せたい

bootstrap3を使ってます。説明文と写真を横並びにして中央に寄せたいのですが、共に左端に寄ってしまいます。どのようにすべきかご教示くださいませ。

html
1<div class="row" >
2
3  <div class="col-xs-6 col-sm-3" >
4    <h3 class="text-center">見出し</h3>
5    <h4 class="text-center">説明文</h4>
6  </div>
7
8  <div class="col-xs-6 col-sm-3">	    
9    <img src="./img/top/aaaa.jpg" alt="写真" width="300" height="300">
10  </div> 
11
12</div>

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

回答2件

ベストアンサー

いまいちピンとこないですが、こういうことですか？

html
1<div class="row" >
2
3  <div class="col-xs-12 col-sm-6" >
4    <h3 class="text-center">見出し</h3>
5    <h4 class="text-center">説明文</h4>
6  </div>
7
8  <div class="col-xs-12 col-sm-6">        
9    <img src="https://placehold.jp/300x300.png" alt="写真" width="300" height="300">
10  </div> 
11
12</div>

投稿2016/12/06 16:02

gin

総合スコア2722

terate

2016/12/06 16:07

ありがとうございます！おかげさまで期待通りになりました！

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

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<meta http-equiv="X-UA-Compatible" content="IE=edge">
6		<title></title>
7		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
8		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
9		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
10		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
11		<!--[if lt IE 9]>
12		<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
13		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
14		<![endif]-->
15		<style type="text/css">
16			.row {
17				margin-bottom: 1em;
18			}
19		</style>
20	</head>
21	<body>
22
23		<div class="container">
24			<div class="row">
25				<div class="col-md-6">
26					<h3>H3ヘッダー</h3>
27					<p>abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {}abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI </p>
28				</div>
29				<div class="col-md-6">
30					<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
31				</div>
32			</div>
33			<div class="row">
34				<div class="col-md-6">
35					<h3>H3ヘッダー</h3>
36					<p>abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {}abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI </p>
37				</div>
38				<div class="col-md-6">
39					<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
40				</div>
41			</div>
42		</div>
43
44		<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
45		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
46	</body>
47</html>
48