左パネルのテキストがトップになるのはなぜわかりませんか?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>
いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、いくつかの詳細は、
の代わりに「いくつかの詳細は、」テキストとあなたの質問をスパム、なぜそうしない削除あなたが達成しようとしていることを説明してください。テキストはどこに置いておきたいですか? – Bojan
別のdivタグ – dnit13
のコードインデントが実際にここにどのように表示されているのか、実際のインデントを表示するには開発者ツールで表示されます – dnit13