テーブル内の文字を、縦横中央の位置に配置したい

bootstrapを利用し、テーブル内の文字を、縦横中央の位置に配置したいのですが、どう記述すれば良いでしょうか？

html
1<div class="container" style="width:750px;">
2<table class="table table-bordered table-condensed" style="width:750px;">
3		<tr>
4			<td class="text-center header" style="width:80px;">名</td>
5			<td><input type="text" id="customer" style="width:150px;" placeholder="名" tabindex="1" class="form-control"></td>
6			<td class="text-center header" style="width:80px;">番号</td>
7			<td><input type="text" id="tel" style="width:150px;" placeholder="番号" tabindex="1" class="form-control"></td>
8		</tr>
9	<tbody id="set_list"></tbody>
10</table>
11

退会済みユーザー

2017/06/09 09:51

Bootstrapを使っているのならば、Bootstrapタグをつけると適切かつわかりやすい回答がつきやすいと思います

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

回答2件

ベストアンサー

Bootstrapにはあらかじめtext-centerクラスという左右中央寄せ用のクラスが用意されていますが、上下中央寄せ用のクラスは用意されていないはずなので、自分でCSSを使って指定する必要があります。テーブル内の文字だけで良いのならば、table内のtd要素にvertical-alignプロパティにmiddleを指定することで実現できます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .container, .container table {
9            width: 750px;
10        }
11
12        .container table td.text-center {
13            vertical-align: middle;
14        }
15
16        .container table td {
17            width: 80px;
18        }
19
20        .container table td input {
21            width: 150px;
22        }
23    </style>
24</head>
25<body>
26<div class="container">
27    <table class="table table-bordered table-condensed" style="">
28        <tr>
29            <td class="text-center header">
30                名
31            </td>
32            <td>
33                <input type="text" id="customer" placeholder="名" tabindex="1" class="form-control">
34            </td>
35            <td class="text-center header">
36                番号
37            </td>
38            <td>
39                <input type="text" id="tel" placeholder="番号" tabindex="1" class="form-control">
40            </td>
41        </tr>
42        <tbody id="set_list"></tbody>
43    </table>
44</div>
45<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
46<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
47</body>
48</html>