リストのaタグを親要素いっぱいにして上下中央揃えにする方法
リストのaタグを親要素いっぱいにして上下中央揃えにする方法
試したこと
HTML
<div class="wrap-contents">
<ul class="layout div2 nav">
<li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd1}&search.x=%8c%9f%8d%f5/">#{buttonText1}</a></li>
<li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd2}&search.x=%8c%9f%8d%f5/">#{buttonText2}</a></li>
</ul>
</div>
CSS
.nav{
width: 100%;
padding-top:10px;
}
.nav li {
border: 1px solid #ddd;
margin-bottom: 5px;
border-radius: 4px;
padding: 8px 8px;
}
.nav li a{
text-decoration: none;
text-align: center;
// y軸のpaddingをいい感じに入れてもろて縦揃えしようとした
padding: auto 0;
}
試行錯誤の結果
HTML
<div class="wrap-contents">
<ul class="layout div2 nav">
<li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd1}&search.x=%8c%9f%8d%f5/">#{buttonText1}</a></li>
<li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd2}&search.x=%8c%9f%8d%f5/">#{buttonText2}</a></li>
</ul>
</div>
CSS
.nav{
width: 100%;
padding-top:10px;
}
.nav li {
border: 1px solid #ddd;
margin-bottom: 5px;
border-radius: 4px;
padding: 8px 8px;
}
.nav li a{
text-decoration: none;
text-align: center;
// 文字折り返し時のタテヨコ中央揃え
position: relative;
display: block;
width: 100%;
top: 50%;
transform : translateY(-50%);
}
Author And Source
この問題について(リストのaタグを親要素いっぱいにして上下中央揃えにする方法), 我々は、より多くの情報をここで見つけました https://qiita.com/whitemita525/items/e75dea6ab0cd6ad3d26a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .