画像と文字の配置について

【htmlを教えてください。】
WordPressで固定ページを作成中です。

画像文字画像文字
文字画像文字画像

このように4×2で格子状に（市松模様みたいな）
画像と文字を並べ、それぞれの文字にリンクを貼りたいです。（文字は中央揃え）

テーブルを利用してみましたが変にスペースが空いてしまいうまく調整できませんでした。

よろしくお願い致します。

追記です。

テーマはまだ未定で、投稿のテキストで可能な方法があればと思っています。

自身のものです↓

<table>
<tbody>
<tr>
<td>
<p style="text-align: center;"> </p>
<p style="text-align: center;">画像</p>
</td>
<td>
<p style="text-align: center;">文字</p>
<p style="text-align: center;">サンプル</p>
</td>
<td style="text-align: center;">画像</td>
<td>
<p style="text-align: center;">文字</p>
<p style="text-align: center;">サンプル</p>
</td>
</tr>
<tr>
<td>
<p style="text-align: center;">文字</p>
<p style="text-align: center;">サンプル</p>
</td>
<td style="text-align: center;">画像</td>
<td>
<p style="text-align: center;">文字</p>
<p style="text-align: center;">サンプル</p>
</td>
<td style="text-align: center;">画像</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

kei344

2017/03/11 09:24

使用されているテーマ名とその入手元URLを質問文に追記ください。また、カスタマイズされている場合や特殊なプラグインを使用されている場合はそれも表示に影響がある可能性がありますので、それも質問文に追記ください。

kei344

2017/03/11 09:46

ご自身で書かれたHTML/CSSを質問文に追記ください。

gumi-2017

2017/03/11 10:23

こちらのサイトのイメージが近いです。https://www.lancers.jp/work/proposal/7596886

kei344

2017/03/11 12:43

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

gumi-2017

2017/03/11 12:54

コードブロックしてみました。

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

回答2件

ベストアンサー

他にも方法はあると思いますが、floatプロパティ、もしくはflexを使用すると質問者さんの実現したいことができると思います。
floatの場合

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        img {
13            width: 100%;
14        }
15
16        .box {
17            float: left;
18            width: 25%;
19        }
20
21        .row::after {
22            content: " ";
23            display: block;
24            clear: both;
25        }
26    </style>
27</head>
28<body>
29<div class="row">
30    <div class="box">
31        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image1" alt="image1">
32    </div>
33    <div class="box">1</div>
34    <div class="box">
35        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image2" alt="image2">
36    </div>
37    <div class="box">3</div>
38</div>
39<div class="row">
40    <div class="box">5</div>
41    <div class="box">
42        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image3" alt="image3">
43    </div>
44    <div class="box">7</div>
45    <div class="box">
46        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image4" alt="image4">
47    </div>
48</div>
49</body>
50</html>

flexの場合

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        body {
8            margin: 0;
9            padding: 0;
10            width: 100%;
11        }
12
13        img {
14            width: 100%;
15        }
16
17        .row {
18            display: -webkit-flex;
19            display: flex;
20            -webkit-flex-wrap: wrap;
21            flex-wrap: wrap;
22            -webkit-align-items: stretch;
23            align-items: stretch;
24            justify-content: flex-start;
25        }
26
27        .box {
28            flex-basis: calc(25%);
29        }
30    </style>
31</head>
32<body>
33<div class="row">
34    <div class="box">
35        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image1" alt="image1">
36    </div>
37    <div class="box">1</div>
38    <div class="box">
39        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image2" alt="image2">
40    </div>
41    <div class="box">3</div>
42    <div class="box">5</div>
43    <div class="box">
44        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image3" alt="image3">
45    </div>
46    <div class="box">7</div>
47    <div class="box">
48        <img src="https://placehold.jp/3d4070/ffffff/350x200.png?text=image4" alt="image4">
49    </div>
50</div>
51</body>
52</html>