Divördeki garip orta metin konumlandırma

-1

Sol paneldeki metnin neden üst üste geldiği anlaşılamıyor mu? Vurgulanan bir arka planın önündeDivördeki garip orta metin konumlandırma

https://jsfiddle.net/c13Lb7ka/

ve nasıl hareket bağlantı metin?

<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>

Bazı ek ayrıntılar, biraz daha ayrıntılı, biraz daha ayrıntılı, biraz daha ayrıntılı, biraz daha ayrıntılı, biraz daha ayrıntılı, biraz daha ayrıntılı, biraz daha ayrıntılı, biraz daha ayrıntılı, biraz daha ayrıntılı,

kaynak

2016-03-30 user3444737

yerine "Bazı ek ayrıntılar" metni ile sorunuzu spam, neden söylemiyorsun kaldırmak Neyi başarmaya çalıştığınızı açıklar mısınız? Metnin nerede olmasını istersiniz? – Bojan

başka bir div etiketi – dnit13

içinde olduğundan, kod girinti aslında burada gösterme şekliniz değildir, gerçek girintiyi görmek için geliştiriciler aracında görüntüleyebilirsiniz – dnit13

, basitçe height: 100%;

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

kaynak

2016-03-30 20:58:25 Bojan

doğru. Teşekkürler! – user3444737

Sol paneldeki metin, block'un display özniteliğine sahip olduğu için div'in üst kısmında kalır. Bunu kaldır ve metin ortalanmış olarak kalır. Eğer dikey ortasına gelecek şekilde metin ortalamak çalışıyorsanız

Fixed fiddle.

kaynak

2016-03-30 20:57:58 Devplex

Teşekkürler! Hatta neden sadece bir hücre özel) anlamadı – user3444737

Divördeki garip orta metin konumlandırma

cevap

İlgili konular