リストのaタグを親要素いっぱいにして、さらにテキストを上下中央にしたいのですが、うまくいきません。
レスポンシブサイトなので下記のように特殊なやり方で上下左右中央にテキストをもってきています。
.u-centaring-all-item-height-flexible {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
https://codepen.io/anon/pen/QdEYyZ
.u-d-b {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.u-color-black {
color: #000;
}
.u-centaring-all-item-height-flexible {}
a {
margin: 0;
padding: 0;
font-size: 100%;
background: transparent;
text-decoration: none;
color: #FFF;
}
/* 下記li 上記a */
.u-centaring-all-parent-height-flexible {
position: relative;
display: table;
}
.c-gnavi__list--green {
background-image: linear-gradient(to top, #7a32, #da59 40%, #9ffc9d);
}
.c-gnavi__list {
width: 32%;
height: 60px;
margin-right: .5%;
padding: .1rem 1rem;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
text-align: center;
font-size: 1.4rem;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
* {
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
*,
:before,
:after {
background-repeat: no-repeat;
box-sizing: inherit;
}
user agent stylesheet li {
display: list-item;
text-align: -webkit-match-parent;
}
Inherited from ul.c-gnavi .c-gnavi {
width: 100%;
color: black;
color: #000!important;
}
nav ol,
nav ul {
list-style: none;
}
ul {
list-style: none;
}
user agent stylesheet ul,
menu,
dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Inherited from nav.c-gnavi.u-mb-9percent .c-gnavi {
width: 100%;
color: black;
color: #000!important;
}
Inherited from body body {
margin: auto;
background-image: url(../img/common-img/back-img.png);
font-family: -apple-system, Helvetica Neue, Hiragino Kaku Gothic ProN, '游ゴシック', 'メイリオ', meiryo, sans-serif;
font-size: 1.6rem;
line-height: 1.6;
letter-spacing: .1rem;
color: #000;
}
Inherited from html html {
font-size: 62.5%;
}
html {
box-sizing: border-box;
cursor: default;
font-family: sans-serif;
line-height: 1.5;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Pseudo ::before element:before,
:after {
text-decoration: inherit;
vertical-align: inherit;
}
*,
:before,
:after {
background-repeat: no-repeat;
box-sizing: inherit;
}
Pseudo ::after element:before,
:after {
text-decoration: inherit;
vertical-align: inherit;
}
*,
:before,
:after {
background-repeat: no-repeat;
box-sizing: inherit;
}
Pseudo ::selection element::selection {
background-color: #b3d4fc;
color: #000;
text-shadow: none;
}
<li class="c-gnavi__list c-gnavi__list--green u-centaring-all-parent-height-flexible u-is-hover-opacy-weak"><a class="u-color-black u-centaring-all-item-height-flexible u-d-b" href="http://l.jp/index.html">LLLLLLL</a></li>
このような特殊なことをしなければdisplay:block;で親要素いっぱいになりますが、
上記のような場合はどのようにすれば実現できますか?
height:100%;にすると親いっぱいにはできますが、今度はテキストが上にずれてしまいます。
その後下記のようにしたところだいたい真ん中に来たのですが原理がよくわかりません。
なぜheightを100%にするとtop: 80%;に変更しないといけないのでしょうか?
.u-centaring-all-item-height-flexible {
position: absolute;
top: 80%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
transform: translateY(-50%)
が要素の高さの半分だけ上に移動するということですよね。
aの高さを100%にすると上記のままだと親要素の高さ割る2分aが上に移動するので、
aの高さが大きくなった分上にずれすぎるのが原因ということですね。
何となく理論はわかったのですが、
transform: translateY(-25%);にしてもまだ上にずれ
transform: translateY(-20%); */にしたらだいたい真ん中に来ました。
aの中のテキストがaの上ぞろえになってしまっているのですが、vertical-align: middle;をつけてもなぜ上下中央にならないのでしょうか?
height: 100%;
vertical-align: middle;
transform: translateY(-20%);
・
>>>
また、ブロックボックス内のテキストなどの縦方向の配置を制御することはできません。
これはとっても大事な情報ですね。
テキストならブロック要素内でも効くと思っていました。
インライン要素内のテキストしか上下中央にできないのですね。
例
spanの中のテキスト 〇
divの中のてきすと ×
・インライン要素に適用した場合には、行ボックスの高さの範囲内での縦方向の位置を指定します。
これはおそらく親要素をはみ出るような指定はできないということですかね?
結論
vertical-align プロパティを適用できるのは、インライン要素とテーブルセルのみ。
ブロック要素自体やその中にあるテキストやインライン要素には効かない。
・下記をulにつけてaにheight:100%;を付けたのですが、それでもうまくいきません。
.u-flexiblebox-centaring-all {
display: flex;
align-items: center; /* 縦方向中央揃え */
justify-content: center; /* 横方向中央揃え */
}
やはりdislpey:table;出ないとだめなのでしょうか?