Q&A
補足ありがとうございます！
最悪、liタグの中身をspanタグで囲って
li span{
position:relative;
top:50%;
left:50%;
transform: translate(-50%, -50%)
}
で中央寄せする方法もアリですね。。。
下記のプログラムで、
文字の位置を、上下中央寄せにしたいです。
text-alignは左右のみですよね。
どこを修正すればよろしいでしょうか。
xamlでいうと、verticalalign:centerなのですが、cssで簡単な記述方法ってあるのでしょうか。
デモページ
https://jsfiddle.net/ahxu07ew/
html
1<div id="Zentai"> 2<ul> 3 <li>あああああああああああああああああああああ</li> 4 <li>いいいいいいいいいいいい</li> 5 <li>ううう</li> 6</ul> 7</div> 8
css
1div#Zentai { 2 position: absolute; 3 width: 100%; 4 left: 0; /*左寄せ*/ 5 bottom: 50px; /*下からの配置位置全画面から回答群までの距離*/ 6} 7 8 9ul li { 10 width: 33%; 11 float: left; 12} 13 14ul li { 15 font-family: 'Lato', sans-serif; 16 display: block; 17 background-color: #fff; 18 border-radius: 6px; 19 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); 20 box-sizing: border-box; 21 margin: 1px; /*計算が合わない*/ 22 color: #000; 23 padding:10px; 24 border: 2px solid #AAAAA6; 25 font-size: 1.3em; 26 text-align: left; 27 float:bottom; 28 line-height: 1.3em; 29 font-weight: bold; 30 position: relative; 31 height: 135px; 32} 33
以上
宜しくお願いいたします。
回答5件
0
こっちです！！！！！！
css
1/*回答の各要素にかかっている*/ 2/* 追加した部分 */ 3ul{ 4 display: table; 5} 6/* 追加した部分 */ 7 8/* 修正した部分 */ 9ul li { 10 /*float: left;*/ 11 width: 33%; 12} 13/* 修正した部分 */ 14 15 ul li { 16 font-family: 'Lato', sans-serif; 17 /*display: block;*/ 18 background-color: #fff; 19 border-radius: 6px; 20 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); 21 box-sizing: border-box; 22 margin: 1px; 23 color: #000; 24 padding:10px; 25 border: 2px solid #AAAAA6; 26 font-size: 1.3em; 27 /*text-align: left;*/ 28 float:bottom; 29 line-height: 1.3em; 30 font-weight: bold; 31 position: relative; 32 vertical-align: middle; 33 text-align: center; 34 height: 135px; /* ここが今回の修正依頼の箇所 */ 35 36 37 /* 追加した部分 */ 38 /* 上のdisplayプロパティなどは消して下さい */ 39 display: table-cell; 40 vertical-align: middle; /* 文字の縦横中央揃え、tableの中にtable-cellを指定したものに効きます */ 41 text-align: center; /* 文字の左右中央揃え */ 42}
こんな感じになります！
縦横中央揃え系は結構難しいので頑張ってください！
投稿2015/11/26 09:21
総合スコア1869
0
ベストアンサー
基本的には MasakazuFukamiさんの回答の通り、
li要素をdisplay:table-cellにして、vertical-align:middle;
とする方法でセル内上下中央揃えにするのが良いと思います。
ただし、display: table-cellにするとtd要素と同等の表示となりますので、
marginが効かなくなります。
デモページにあるように、ひとつひとつのボックスの間に余白をつけて分離させるデザインの場合、
単純にdisplay: table-cell;にしただけではこの余白の再現ができません。
もし余白も再現したいなら、
CSS
1ul { 2 display: table; 3 border-collapse: separate; 4 border-spacing: 5px; /*お好きな余白サイズに*/ 5}
とすることで、セルの周辺に余白を確保することが可能です。
ちなみに border-spacing: 5px;の場合は、各セルの上下左右に一律に余白がつきます。
余白を上下のみ、左右のみ、とすることはできますが、上下左右バラ指定することはできません。
詳細はこちらのブログを参考にしてください。
投稿2015/11/26 11:32
総合スコア3763
aKusano様
ご回答ありがとうございます★
そうなんです、そこで悩んでいたんです。
まだ解決しておりません。
現在アドバイスを参考にこのようにしてみました。
https://jsfiddle.net/ahxu07ew/6/
そうすると今度は、
div#Zentaiが変更できなくなりました。
ul liのwidthは変更できます。
position: relative;の部分を変更しないといけないのでしょうか。
あと、border-collapse: separate;はあってもなくても
border-spacing:を設定することができました。
できれば全体に対して要素を引いた分の余りを均等に配分したいのですがautoが使えませんでした。
もし分かれば教えていただけると助かります。
参考ページのソース試してみましたが、普通にdiv#Zentaiのwidthも指定できますよ？
あと、
>できれば全体に対して要素を引いた分の余りを均等に配分したいのですがautoが使えませんでした。
こちらの件はどうしたいのかがいまいちよく分かりませんでした。
もう少し具体的に書いていただけると何か解決策が見えるかもしれません。
0
すいませんコードが貼れないのでこちらにもう一度貼ります！
ベストアンサー選ばれているようなので参考程度に御覧ください！
おそらく実現されたいことは
marginの調整等もできるボックスを作成
その中の文言を真ん中に表示したい
だと思いますのでそれを実現できるであろうコードの一部を作成しました
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 /* html5restcssなどで消されるデフォルトのcss */ 8 *{ 9 box-sizing:border-box; 10 -webkit-box-sizing:border-box; 11 } 12 ul{margin: 0px;padding: 0px;} 13 /* html5restcssなどで消されるデフォルトのcss */ 14 15 #zentai{ 16 width: 100%; 17 border: solid 1px red; 18 } 19 #zentai ul{ 20 width: 100%; 21 overflow: hidden; 22 } 23 #zentai ul > li{ 24 position: relative; 25 list-style: none; 26 float: left; 27 width: 32%; 28 margin-left: 2%; 29 height: 100px; 30 border:solid 1px #ccc; 31 } 32 #zentai ul > li:first-of-type{margin-left: 0%;} 33 #zentai ul > li span{ 34 position: absolute; 35 top: 50%; 36 left: 50%; 37 transform:translate(-50%,-50%); 38 -webkit-transform:translate(-50%,-50%); 39 } 40 </style> 41</head> 42<body> 43 <div id="zentai"> 44 <ul> 45 <li><span>あいうえお</span></li> 46 <li><span>あいうえお</span></li> 47 <li><span>あいうえお</span></li> 48 </ul> 49 </div> 50</body> 51</html>
ボックスは上に配置されていますが、ここからは質問者様の都合のいいように調整されて下さい！
marginの調整等をできるボックスに関しては
floatを使用し、１つのliタグを32%に指定。
liタグ同士の隙間は100- 32*3 = 4 （隙間のそう%数）
二つ隙間を配置する場合は4 / 2で１つのmargin-leftが2%;
一番最初のliタグにはmargin-leftが必要ないので0%を指定。
このようにするとレスポンシブでかつ隙間も自動調整してくれるボックスが作成されます。
またspanタグに関してはその中身にposition:absolute;を指定し、tranformで自分（span）を中心に持ってくるようにしています。
ちなみに要素を縦横中央寄せにする方法でtableを使わない方法をまとめております。
よかったら参考にされて下さい！
http://blog.fukamin.me/2015/10/03/css%E3%81%A7%E7%B8%A6%E6%A8%AA%E4%B8%AD%E5%A4%AE%E5%AF%84%E3%81%9B%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%953%E9%81%B8/
cssに関してはわかりやすく書いたつもりですが、コード的には汚いのですいません！
あと、blackcoffeeさんのサイトにはresetcss（ブラウザのデフォルトのcssを破棄して全ブラウザで同じように見えるようにしてくれるcss）が入っていないようなので入れるのもおすすめします！
長々失礼しました！
頑張ってください！
投稿2015/11/27 03:06
総合スコア1869
ご親切に回答いただきまして、誠にありがとうございます。
ベストアンサーを決めないといけないのってなんでなんですかね？
解決済みだけでいいですよね。
なんか、他の回答者様に申し訳なくなるので嫌なんですよね。
ハイレベルで、いろいろと勉させてたいただきました。
*とか＞の使い方や、子要素や孫要素などあまり理解していなかったので、
いろいろと調べることができました。
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
の記述がどういう動きで中心に来ているのか私のレベルではとても理解できなかったので驚きました。
あと、
overflow: hidden;
も不思議でした。
取り入れさせていただきます。
頑張ります★
今後とも宜しくお願いいたします。
はい！
よろしくお願いいたします！
0
これでイケルと思います！
css
1#zentai{ 2 position: absolute; 3 width: 100%; 4 top: 50%; 5 left: 50%; 6 transform: translate(-50%, -50%); 7}
投稿2015/11/26 09:13
総合スコア1869
0
http://barktoimagine.com/web/css/1653
こちらの【行数が決まっていない場合】でいかがでしょうか。
投稿2015/11/26 08:44
総合スコア290
ikki57様
リンクありがとうございます。
今回は、横並びリストとmarginの設定が必要だったので、
これを参考に他にも追加できるか試してみます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/27 02:43