html - Positioning content of <div> in a fixed header -


html:

.header {      border-style: solid;      border-width: 1px;      height: 10%;      width: 80%;      position: fixed;      display: flex;      justify-content: space-between;      }            .image {      border-style: solid;      border-width: 1px;      text-align: center;      vertical-align: middle;      }            .navigation {      border-style: solid;      border-width: 1px;      }            .content{      padding-top: 8%;      }            ul li {      display: inline-block;      }
<div class="header">      <div class="image">      image of page goes here    </div>      <div class="navigation">      <ul>        <li>contact us</li>        <li>about</li>        <li>home</li>      </ul>    </div>    </div>  <div class="content">      <p>am no listening depending believing. enough around remove barton agreed regret in or it. advantage mr estimable commanded provision. year shot deny shew come had. shall downs stand marry taken out. related mr account brandon up. wrong never ready ham these witty him. our compass see age uncivil matters weather forbade minutes. ready how truth son new under. breakfast procuring nay end happiness allowance assurance frankness. met simplicity nor difficulty unreserved who. entreaties mr conviction dissimilar me astonished estimating cultivated. on no applauded exquisite additions. pronounce add boy estimable nay suspected. sudden nay elinor thirty esteem temper. quiet leave shy gay off asked large style. betrayed cheerful declared end and. questions additions extremely incommode. next half add call them eat face. age lived smile 6 defer bed few. had admitting concluded behaviour him she. of death or being other. received shutters expenses ye pleasant. drift blind above @ up. no simple county stairs should praise as. drawings sir gay landlord had law smallest. formerly welcomed attended declared met unlocked. jennings outlived no dwelling denoting in peculiar believed. behaviour excellent middleton curiosity departure ourselves. on sake home leaf. of suspicion departure @ extremely believing. know said mind rent oh hope of. general enquire picture letters garrets on offices of no on. 1 hearing between excited evening inhabit thought you. style begin mr heard in music tried do. unreserved projection no introduced invitation. justice improve age article between. no projection preference reasonably delightful celebrated. preserved , abilities assurance tolerably breakfast use saw. , painted letters forming far village elderly compact. rest west each spot , knew. estate gay wooded depart 6 far her. of have lose gate bred. separate removing or expenses in. had covered evident chapter matters anxious. received overcame oh sensible @ an. formed change merely county it. separate contempt domestic to oh. on relation addition branched. put hearing cottage norland letters equally prepare too. replied exposed savings no viewing up. body add him hill. no father living people estate if. mistake produce beloved demesne if pursuit. cause dried no solid no small still widen. ten weather evident smiling bed against examine its. rendered far opinions 2 yet moderate sex striking. sufficient motionless compliment stimulated assistance at. convinced resolving extensive agreeable in on remainder. cordially affection met propriety him. man towards private weather pleased. in more part lose need want rank no. @ bringing or sensible pleasure. prevent parlors waiting females message society. situation admitting promotion @ or perceived be. mr acuteness estimable enjoyment up. held late felt know. learn allow solid grave. middleton suspicion age attention. chiefly several bed wishing. moments on chamber pressed to. doubtful yet way answered humanity desirous. minuter believe service arrived civilly add all. acuteness allowance @ eagerness favourite in extensive exquisite ye. remain valley mrs uneasy remove wooded him you. questions favourite him concealed. wife face took he. taste begin old why since dried can first. prepared or humoured formerly. evil mrs true post. express village evening prudent ye hundred forming. thoughts why not directly reserved packages you. winter silent favour of tended mutual.       </p>      </div>

with above code divide webpage in fixed header , scrollable content. fixed header contains image on left side , navigation on right side. works fine far.

now want achieve text image of page goes here appears in center , not on left top of <div> element

i tried go padding: 10%. however, once adjust height of header padding needs readjusted. tried solution css center text (horizontally , vertically) inside div block not make work.

what have change in code content of image in center?

you can find code here: https://jsfiddle.net/q0yr6zsr/12/

it center content. also, recommend use bootstrap. easy use.

here example of fixed header https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

new code html

  <div class="image">     <div> image text </div>   </div>

css

.image {   border-style: solid;   border-width: 1px;   text-align: center;   display: flex; } .image > div {   display: flex;   align-items: center;  }

Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more