aタグをdisplay:blockにした上、そのaタグ内の文字を上下中央にする方法ってありますか？縦はサイズが決まっておりますが行数は決まっておりません。
table-cellをつかったら？
それだけの説明ならpaddingだけでできるよね。
ごめん、縦幅決まってたのかこれでどうでしょうか？chromeでしか確認してないです<style>html,body{ width:100%; height:100%; margin:0; padding:0; position:relative;}a{ display:block; position:absolute; top:0; bottom:0; margin:auto; width:auto; height:300px; background:pink;}</style><body> <a>あああ<br>いいい<br>ううう</a></body>縦幅決まってないんなら、display:table;にしてwidth:;height:;を削除するといいと思います
aの中の文字を…だったか。ごめんなさい勘違いしてたこれ無視してください
<style>html,body{ width:100%; height:100%; margin:0; padding:0;}a{ position:relative; display:block; height:300px; width:100px; background:pink;}a p{ position:absolute; display:table; margin:auto; padding:0; top:0; bottom:0;}</style><body> <a><p>あああ<br>いいい<br>ううう</p></a></body>aにposition:relative;を入れて、aの中の文字をpとかspanとかで括ってそれをposition:absolute;したらできた！これでどうでしょうか
table-cellでいいですやん
それもそうだ
ID変わってますがスレ主です。ご回答ありがとうございます！
後出しでアレなんですが、aタグは計6つあり、2つずつで改行させたいので全て並列してしまうtable-cellはあえて避けていました。途中で改行させたりすることは可能なんでしょうか？(独学でcssを学んでいるため知識がかなり中途半端でお恥ずかしいです…汗)
今テストできる環境にいないので申し訳ないのですが一旦2NE2QwGRqRSLさんのを試しつつtable-cellも再確認してみたいと思います。何はともあれありがとうございます！
それなら table table-cellの塊を2コずつ作ればいいだけだと思うぜ。<div class="tbl"> <div class="tblc">a</div><div class="tblc">b</div></div><div class="tbl"> <div class="tblc">c</div><div class="tblc">d</div></div><div class="tbl"> <div class="tblc">e</div><div class="tblc">f</div></div>
xjT9I38aGTPjさんお返事遅れてすみません。色々調べてるうちdisplay:flexで解決できました。でもわざわざ調べてくださってありがとうございます！
materializeでは.valign-wrapper { display: flex; align-items: center; }.valign { display: block; }で処理してるみたいよ。
3a4qWyy0i5Gxさんお返事遅れてすみません。色々調べてるうちdisplay:flexで解決できました。でもこれシンプルでいいですね～今後似たようなモノを作るので次回からこれ参考にさせていただきます！ありがとうございます
みんなの回答 5 件
table-cellをつかったら？
それだけの説明ならpaddingだけでできるよね。
ごめん、縦幅決まってたのか
これでどうでしょうか？chromeでしか確認してないです
<style>
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
position:relative;
}
a{
display:block;
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:300px;
background:pink;
}
</style>
<body>
<a>あああ<br>いいい<br>ううう</a>
</body>
縦幅決まってないんなら、display:table;にしてwidth:;height:;を削除するといいと思います
ID変わってますがスレ主です。
ご回答ありがとうございます！
後出しでアレなんですが、aタグは計6つあり、2つずつで改行させたいので全て並列してしまうtable-cellはあえて避けていました。途中で改行させたりすることは可能なんでしょうか？
(独学でcssを学んでいるため知識がかなり中途半端でお恥ずかしいです…汗)
今テストできる環境にいないので申し訳ないのですが一旦2NE2QwGRqRSLさんのを試しつつtable-cellも再確認してみたいと思います。
何はともあれありがとうございます！
materializeでは
.valign-wrapper { display: flex; align-items: center; }
.valign { display: block; }
で処理してるみたいよ。
Helpers - Materialize
http://materializecss.com/helpers.html関連するトピックス