CSSでli 文字縦2列を縦ぞろえにしたい

サイドメニュー作っているのですがliで文字が2段組みと1段組みが混在します。
1段組みではちょうど中央に行けるのですが改行が入るとうまくちゅおうになりません
参考サイトなど御座いましたら教えて頂けると助かります。

html
1<div id="side">
2<ul>
3<li><a href="#"><span>テキスト </span><span>[テキスト]</span></a></li>
4<li><a href="#">テキスト [ テキスト]</a></li>
5<li><a href="#">テキスト [テキスト]</a></li>
6<li><a href="#"><span>テキスト </span><span>[テキスト]</span></a></li>
7</ul>
8</div>

css
1@charset "utf-8";
2/* CSS Document */
3#side{width:180px;font-family: YuMincho;color: #413a3d;font-size: 13px;font-weight: 400;line-height: 40px;}
4#side a:link{text-decoration:none;color:#413a3d;}
5#side ul{padding: 0 10px;width:160px;background-color: #f7f6f3;list-style-type:none;text-align: center;}
6#side ul li{border-bottom: 2px dotted #cca571;padding: 5px 0;height: 40px;}
7.margin-bottom18{margin-bottom:18px;}
8.search{width: 164px;height: 24px;}
9li {
10  -webkit-box-align: center; /* safari, Chrome */
11  -moz-box-align: center;    /* Firefox */
12  -o-box-align: center;      /* Opera */
13  -ms-box-align: center;     /* IE */
14  box-align: center;         /* ベンダープレフィックスなし */
15}
16a{display:block;}

行動規範の内容に同意します

回答2件

AsaoMakoさんがやろうとしている方法で実現するならば、display: box;の指定をする必要があるのではないですかね？
ただ、display:box、box-align: center;を使った方法だと、IEでうまく動いていなかったのでdisplay: table-cell;を使用した方法を試してみました。

display:boxのIEの対応について

CSS
1#side{
2	width:180px;
3	font-family: YuMincho;
4	color: #413a3d;
5	font-size: 13px;
6	font-weight: 400;
7	/*line-height: 40px;*/
8}
9#side a:link{
10	text-decoration:none;
11	color:#413a3d;
12}
13#side ul{
14	padding: 0 10px;
15	width:160px;
16	background-color: #f7f6f3;
17	list-style-type:none;
18	/*text-align: center;*/
19}
20#side ul li{
21	border-bottom: 2px dotted #cca571;
22	padding: 5px 0;
23	height: 40px;
24	width: 160px;
25	display: table;
26}
27#side ul li a{
28	display: table-cell;
29	vertical-align: middle;
30	width: 160px;
31}
32
33#side ul li a span{
34	display: block;
35}
36
37.margin-bottom18{
38	margin-bottom:18px;
39}
40.search{
41	width: 164px;
42	height: 24px;
43}

こちらでいかがでしょうか？

投稿2015/10/30 13:38

編集2015/10/30 13:43

dsk

総合スコア44

以下の３つのプロパティを併用すると、要素の改行を抑制し、はみ出た文字は...の表示にすることができます。

DEMO

css
1
2#side ul li a{
3  white-space: nowrap;
4  overflow: hidden;
5  text-overflow: ellipsis;
6}
7
8#side ul li a span {
9  display: block;
10  height: 20px;
11  line-height: 20px;
12}