html - How to center a div horizontally with a varying width -

-

i did lot of research on , found if set width, can use margin: 0 auto left: 0;, right: 0, , position: absolute, saw had declared width.

well in case, doing button cursor: pointer;, not want set width because cursor turn pointer. in addition link , mess more.

so, said, question is, how can div centered absolute value without declaring width.

.blue-section {    background-color: #9bd0d2;    height: 500px;    width: 100%;    position: relative;  }  #blue-info-container {    top: 20%;    position: absolute;    left: 0;    right: 0;    width: 70%;    margin: 0 auto;    text-align: center;  }  #blue-section-title {    color: #fff;    font-size: 1.4em;    padding-bottom: 75px;  }  #blue-section-description {    color: #fff;    font-size: 1.2em;  }  #blue-section-button {    position: absolute;    bottom: 20%;    left: 0;    right: 0;    width: 300px;    margin: 0 auto;    cursor: pointer;  }  #blue-section-button span {    border: 1px solid #fff;    text-align: center;    color: #fff;    padding: 20px 20px;  }
<div class="blue-section">    <div id="blue-info-container">      <div id="blue-section-title">fdsfdsafsda</div>      <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>    </div>    <div id="blue-section-button"><span>more about</span>    </div>  </div>

try this. have modified css

.blue-section {                  background-color: #9bd0d2;                  height: 500px;                  width: 100%;                  position: relative;              }              #blue-info-container {                  top: 20%;                  position: absolute;                  left: 0;                  right: 0;                  width: 70%;                  margin: 0 auto;                  text-align: center;              }              #blue-section-title {                  color: #fff;                  font-size: 1.4em;                  padding-bottom: 75px;              }              #blue-section-description {                  color: #fff;                  font-size: 1.2em;              }              #blue-section-button {                  position: absolute;                  bottom: 20%;                  left: 0;                  right: 0;                  text-align: center;              }              #blue-section-button span {                  border: 1px solid #fff;                  text-align: center;                  color: #fff;                  padding: 20px 20px;                  display: inline-block;                  cursor: pointer;              }
<div class="blue-section">              <div id="blue-info-container">                  <div id="blue-section-title">fdsfdsafsda</div>                  <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>              </div>              <div id="blue-section-button"><span>more about</span>              </div>          </div>


Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more