縦に画像をセンタリングをしたいんです

Question

誰かお助け下さいませ。

今現在下記のコードを組んでおるのですが、

<div class="wrap">
 <h4 class="img box">
  <img src="../img/flow_1.png" alt="">
  <img src="../img/flow_a.png" alt="">
 </h4>
 <p class="box vt">
  先ずはお電話、FAX、メール等でご依頼下さい。<br>
  <a href="/" title="料金表へ" class="link">ご金額の確認はこちら</a>
 </p>
 <div class="box vm">
  <img src="../img/flow1.png" alt="">
 </div>
</div>

/* 少し余計な内容も入っております */
.wrap{ display: table; }
div.wrap .box {
  display: table-cell;
  margin-right: 20px;
}
div.wrap .box:last-child{
  margin-right: 0;
}
div.wrap p.box {
  padding: 6% 0 0 5%;
  width:70%; 
  font-size: 1.2em;
}

<div class="wrap">
・・・・
</div>

この上記コードのくくりを５つ複製して立てに並べたいのですが、
下部画像の通り何故か右側へ徐々にずれていってしまいました。
（<table>を使いたいとは思ったのですが、以前<table>を乱用するのは良くないという指摘をされたことがあったので、調べて上記の様にしました。）

真っ直ぐに並べるのにどうしたら良いのか教えて頂きたいです。
または、もっと良い方法があるのでしたらご教授頂けると幸いです。
宜しくお願い致します。

Comments

[kei344]

画像とHTMLが一致しません。全体像がわかる画像及びHTML当該部分全体を追記されたほうが回答を得やすいはずです。

Answer 1

提示頂いたソースコードがよくわからなかったので、画像の見た目を実現するために自分だったらどうするかという視点で回答します。(画像の左に何か文字の端が見えますが見えなかったことにします)

ちなみに直接的な回答ではなく、実現するためのポイントを説明しているで参考にしてみてください。

<ul class="list">
  <li class="item"><img src="/img/item1.png"></li>
  <li class="yajirushi"><img src="/img/yajirushi.png"></li>
  <li class="item"><img src="/img/item2.png"></li>
  <li class="yajirushi"><img src="/img/yajirushi.png"></li>
  <li class="item"><img src="/img/item3.png"></li>
  <li class="yajirushi"><img src="/img/yajirushi.png"></li>
  <li class="item"><img src="/img/item4.png"></li>
</ul>

.list li {
  width: 100px;
  text-align: center; // 領域内で中の文字や画像を中央揃え
}

参考：text-align …… 行揃えの位置・均等割付を指定する

---

ただ、文書的に意味のない .yajirushi をHTML内に書くのはナンセンスな気がするのでそういう場合は以下のようにするのもありです。

<ul class="list">
  <li class="item"><img src="/img/item1.png"></li>
  <li class="item"><img src="/img/item2.png"></li>
  <li class="item"><img src="/img/item3.png"></li>
  <li class="item"><img src="/img/item4.png"></li>
</ul>

.list {
  width: 100px;
}
.item {
  text-align: center; // 領域内で中の文字や画像を中央揃え
}
.item:after { //擬似要素で矢印をつくる
  content: "";
  display:block;
  width: 100px;
  height: 100px;
  background: url(/img/yajirushi.png) no-repeat;
  background-position: center; //背景画像の中央配置
}

どちらのやり方にせよポイントは、以下です。

• width で中央揃えしたい要素の横領域を揃えて上げる
• text-align: center; で要素を中央揃え
• もし背景画像などの場合は background-position: center; で中央配置

Comments

[TChanger]

ご回答ありがとうございました！
全く思いつかない方法を教えてくださり感謝です！
変に深く考えすぎてしまったみたいです。ありがとうございました！

Answer 2

こいつが原因じゃないですか？

/* 少し余計な内容も入っております */
.wrap{ display: table; }
div.wrap .box {
  display: table-cell; //ここでtableと同じ挙動をさせている
  margin-right: 20px;
}
div.wrap .box:last-child{
  margin-right: 0;
}
div.wrap p.box {
  padding: 6% 0 0 5%; //こいつに左5％のパディングが入ってる
  width:70%; 
  font-size: 1.2em;
}

あと、こういう縦にブロック要素を並べる場合は、

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
</ul>
<style>
ul{
    list-style-type: none;
}
li{
    display: inline-block;
}
</style>

これが手っ取り早いですよ。

Comments

[TChanger]

ご回答ありがとうございます！
違う方法を教えて下さり助かりました！

Answer 3

wrapで区切られているため、各warp毎でtable-cellの横幅が決まります。
この場合は最初のboxにwidthを指定してあげることで解決できると思います。

.wrap{ display: table; }
div.wrap .box {
  display: table-cell;
  margin-right: 20px;
}
div.wrap h4.box {
  width:100px;
}
div.wrap .box:last-child{
  margin-right: 0;
}
div.wrap p.box {
  padding: 6% 0 0 5%;
  width:70%; 
  font-size: 1.2em;
}

Comments

[TChanger]

ご回答ありがとうございます！
仰るとおりでした！
載せた画像が悪すぎたのですが、他にも横にboxがありましたので、
幅のサイズを指定しましたら、キレイに並びました！
ありがとうございました！