css - displaying anchor tag with both block and table-cell features -

-

so, have following code:

<div class="flexslider" id="carousel">     <ul class="thumbs">         <li class="thumbnail">             <a href="#">really long link happens move multiple lines</a>         </li>         <li class="thumbnail">             <a href="#">link 2</a>         </li>         <li class="thumbnail">             <a href="#">link 3 </a>         </li>         <li class="thumbnail">             <a href="#">link 4</a>         </li>     </ul> </div>

with folllowing css:

.flexslider ul.thumbs {     margin: 0;     display: table;     height: 100px; }  .flexslider li.thumbnail {     list-style: none;     width: 25%;     height: 100px;     display: table-cell;     border-right: solid 1px #000000;     text-align: center;     vertical-align: middle;     background-color: #eeeeee; }  .flexslider li.thumbnail {     display: block;     width: 100%;     height: 100%;     padding: auto 5px;     vertical-align: middle; }

the problem this. want link fill entire area - display: block;. however, want text vertical-align: middle;. however, if have display set block, fills area, doesn't vertically align text. if change display table-cell, text aligns properly, a doesn't fill entire li. can't figure out how make both.

thoughts?

thanks!

you need set line height height of li. check it!

http://codepen.io/tylerism/pen/nqxljm

.flexslider li.thumbnail {     display: block;     width: 100%;     line-height:100px;    }

edit: updated my codepen. using bit of hack put anchor tag on outside of li. work you?


Comments

Post a Comment

Popular posts from this blog

how to do line continuation in perl debugger for entering raw multi-line text (EOT)? -

-
i learning perl. trying in debugger define variable, here-document. not know how enter same code in perl script, in debugger. due new lines present inside eot, makes hard in interactive debugger. here small example. have script: >cat ex1.perl #!/usr/bin/perl -w $s =<<'eot'; first line second line eot print $s now run , gives expected output: >perl ex1.perl first line second line now want same in debugger. tried this: >perl -de0 loading db routines perl5db.pl version 1.39_10 db<1> $s =<<'eot';\ cont: first line\ cont: second line\ cont: eot can't find string terminator "eot" anywhere before eof @ (eval 6) [/usr/share/perl/5.18/perl5db.pl:732] line 2. @ (eval 6)[/usr/share/perl/5.18/perl5db.pl:732] line 2. eval 'no strict; ($@, $!, $^e, $,, $/, $\\, $^w) = @db::saved;package main; $^d = $^d | $db::db_stop; $s =<<\'eot\'; first line second line eot; ' called @ /usr/share/perl...
Read more

javascript - Create websocket without connecting -

-
is there way create websocket without connecting right away? far think var ws = new websocket("ws://ws.my.url.com"); creates , connects right away. i'd create socket, define callbacks, , connect once user clicks connect button. thanks no. creating websocket means you've created connection server (or started process of connecting). there no such thing creating websocket isn't connecting yet. you create object store configuration parameters , tell object connect when wanted to, though i'm not sure why that's better creating actual websocket when connect made. or create function setup work , call function later when user clicks connect button.
Read more

android - Linear layout children not scrolling -

-
i'm trying add image views linear layout @ runtime. <linearlayout android:id="@+id/llfolderlayout" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight=".65" android:orientation="horizontal" android:scrollbars="horizontal" > </linearlayout> linearlayout llfoldertabs = (linearlayout) myfolder.findviewbyid(r.id.llfolderlayout); imageview imgtab = new imageview(activity); imgtab.setid(i); imgtab.settag(i); imgtab.setimagedrawable( mcontext.getresources().getdrawable(r.drawable.icon_folder_inactive)); if (i == 0) { imgtab.setimagedrawable( mcontext.getresources().getdrawable(r.drawable.icon_folder_active)); // imgtab.setpadding(10, 0, 4, 0); linearlayout.layoutparams lp = new linearlayout.layoutparams( 74, layoutparams.match_parent); lp.setmargins(15, 0, 0, 0); imgtab.setlayoutparams(lp); } else { // imgtab....
Read more