2016-03-30 36 views
-1

左パネルのテキストがトップになるのはなぜわかりませんか?div内の不思議中央テキストの配置

https://jsfiddle.net/c13Lb7ka/

とどのようにホバー背景の前にリンクテキストを移動?

<html> 
<head> 
    <title>ssssssss</title> 

    <style> 
     html, body{ 
      height: 100%; 

     } 
     .flat_menu_wrap{ 
      display: table; 
      width: 75%; 
      height: 50%; 
     } 
     .flat_menu_wrap div{ 
      text-align: center; 
      vertical-align: middle; 
     } 
     .flat_menu_wrap a{ 
      vertical-align: middle; 
      color: #f00; 
      font-size: 15px; 
      font-weight: 600; 
      display: block; 
      height: 100%; 
     } 

     .f_r_wrap{ 
      width: 100%; 
      height: 100%; 
     } 
     .flat_cell_l{ 

      display: table-cell; 
      width: 40%; 
      background-image: url("http://numberimage.ru/img/tst/wood.png"); 
     } 
     .f_r_t_wrap{ 
      display: table; 
      width: 100%; 
      height: 100%; 
     } 
     .f_c{ 
      position: relative; 
      display: table-cell; 
      background-size: cover; 
      min-height: 100px; 
     } 

     .f_r_t_1{ 
      background-image: url("http://numberimage.ru/img/tst/furnit.png"); 
     } 
     .f_r_t_2{ 
      background-image: url("http://numberimage.ru/img/tst/frezer.png"); 
     } 

     .f_r_b_wrap{ 
      display: table; 
      width: 100%; 
      height: 100%; 
     } 
     .f_r_b_wrap > div{ 

      background-size: cover; 
      min-height: 100px; 

     } 

     .f_t{ 
      display: table; 
     } 
     .f_r{ 
      display: table-row; 
     } 
     .f_r_b_1{ 
      background-image: url("http://numberimage.ru/img/tst/metal.png"); 
     } 
     .f_r_b_2{ 
      background-image: url("http://numberimage.ru/img/tst/tools.png"); 
     } 
     .f_r_b_3{ 
      background-image: url("http://numberimage.ru/img/tst/repair.png"); 
     } 

     .f_s_a{ 
      position:absolute; 
      width:100%; 
      height:100%; 
      top:0; 
      left: 0; 

      z-index: 1; 
     } 
     .f_s_a:hover{ 
      background-color: rgba(129, 129, 129, 0.38); 
     } 

     .f_t_m{ 
      width: 100%; 
     height: 100%; 
     } 
    </style> 
</head> 
<body> 
<div class="flat_menu_wrap"> 
    <div class="f_t f_t_m"> 
    <div class="f_r"> 
     <div class="flat_cell_l f_c"> 

      <a href="/go.html">wodd dfdfd dfd</a> 
     </div> 

     <div class="f_c"> 
      <div class="f_r_wrap f_t"> 
       <div class="f_r"> 
        <div class="f_c"> 
         <div class="f_r_t_wrap"> 
          <div class="f_r"> 
           <div class="f_r_t_1 f_c"> 
            <a class="f_s_a" href="/go776.html"><span></span></a> 
            <a href="/go35345.html">wodd dfdfd dfd</a> 
           </div> 
           <div class="f_r_t_2 f_c"> 
            <a href="/5533go.html">reload answer next</a> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

      <div class="f_r"> 

       <div class="f_c"> 

        <div class="f_r_b_wrap"> 
         <div class="f_r"> 
          <div class="f_r_b_1 f_c"> 
           <a href="/333go.html">wodd dfdfd dfd</a> 
          </div> 
          <div class="f_r_b_2 f_c"> 
           <a class="f_s_a" href="/g53333333333355o.html"></a> 
           <a href="/g555o.html">reload answer next</a> 
          </div> 
          <div class="f_r_b_3 f_c"> 
           <a href="/g5345o.html">reload answer next</a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

      </div> 
     </div> 
    </div> 
</div> 
</div> 
</body> 
</html> 

いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、

+0

の代わりに「いくつかの詳細は、」テキストとあなたの質問をスパム、なぜそうしない削除あなたが達成しようとしていることを説明してください。テキストはどこに置いておきたいですか? – Bojan

+1

別のdivタグ – dnit13

+0

のコードインデントが実際にここにどのように表示されているのか、実際のインデントを表示するには開発者ツールで表示されます – dnit13

答えて

1

、単にheight: 100%;

.flat_menu_wrap a{ 
    vertical-align: middle; 
    color: #f00; 
    font-size: 15px; 
    font-weight: 600; 
    display: block; 
    //height: 100%; 
} 
+0

あなたは正しい。ありがとう! – user3444737

1

display属性がblockであるため、左パネルのテキストはdivの上部にとどまります。これを削除すると、テキストは中央に残ります。あなたはそれが垂直方向に中央揃えされるように、あなたのテキストを中央にしようとしている場合

Fixed fiddle.

+0

ありがとう!なぜなら私はなぜ1つのセルだけが特別なのか分からなかった) – user3444737

関連する問題