html - css button : button horizontal align and size stretch with text size -

-

i'm trying make button left enter image description here, middle enter image description here (repeating) , right enter image description here background:

<div class="horizontal">     <div class="mybutton">         <div class="left" ></div>         <div class="middle" >             text         </div>         <div class="right" ></div>     </div> </div>

my css following:

.horizontal {       width: 100%;   }  .mybutton {     width: 120px;      height: 30px; }  .left {     background-image: url("http://i.stack.imgur.com/r5gpp.png");     /*border: 1px solid red;*/     float: left;     height: 30px;     width: 4px; }  .middle {     background-image: url("http://i.stack.imgur.com/yxpke.png");    /* border: 1px solid yellow;*/     float: left;     height: 30px;     padding-left: 5px;     padding-right: 5px;     text-align: center;     width: 100px; }  .right {     background-image: url("http://i.stack.imgur.com/oaple.png");     /*border: 1px solid green;*/     float: left;     height: 30px;     width: 4px; }

now need is:

  • mybutton aligned in middle of horizontal block (the page).

enter image description here

  • and middle stretched text fit (without manually setting width 120px in example).

enter image description here

i have no clue how this.

here's fiddle : http://jsfiddle.net/kcbpw/3/ ,

thank much.

here's updated fiddle: http://jsfiddle.net/stevenschobert/fndrt/

to fix text-wrapping & vertical centering in .middle class, add line-height:30px , min-width:50px;

.middle {     min-width: 50px;     line-height:30px;     /* rest of styles ... */ }

for horizontal alignment, can add text-align:center; .horizontal class , margin:auto; .mybutton.

.horizontal {     width: 100%;     text-align:center; }  .mybutton {     margin:auto auto;     /* cont... */ }

Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

-
i have simple page in intranet uses razor/asp fetch single record table , display it, plus few graphic, dashboard display. meaning, no user intervention other first time open ie internal url. the problem having every morning ie displays "page not found or network error" message. refresh page, , it's stuck , doesn't display anything. try different pc, open ie internal url , it's stuck... ...until following: login server hosting page run inetmgr go web sites, etc right click on page that's giving me problem , select browse at moment, error message: server error in '/' application. -------------------------------------------------------------------------------- type of page not served. description: type of page have requested not served because has been explicitly forbidden. extension '.cshtml' may incorrect. please review url below , make sure spelled correctly. requested url: /application/dashboard.cshtml ---------------...
Read more