html - How can I centre an object whose height I do not know in a list? -

-

it seems no matter can't text black background centre vertically. problem text on 1 line , on 2 or three. i'm trying automatically adjust can't.

i have tried numerous approaches such listed on here.

here code trying centre:

.infogrid {    display: inline-block;    position: relative;    bottom: 45px;    right: 0;    margin: 0px 1% -100% 1%;    width: 98%;    background-color: #f6f6f6;  }  .infogrid ul {    margin: 0;    padding: 0;    text-align: center;  }  .infogrid li {    display: inline-block;    position: relative;    background-color: white;    width: 320px;    margin: 1vw;    height: 320px;    transition: transform 0.4s;    box-shadow: 0.2vh 0vh 0.8vh #888888;  }  .infogrid li:hover {    transform: scale(1.05, 1.05);  }  .tilewrappertext {    display: inline-block;    color: white;    visibility: hidden;    z-index: 1;    width: 100%;    text-align: center;    font-family: "century gothic", "arial", "sans-serif";    background-color: black;    opacity: 0.75;    font-size: 2.2em;  }  #tilewrapper:hover .tilewrappertext {    visibility: visible;  }
<div class="infogrid">    <ul>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile1.png" width="96%">          <h3 class="tilewrappertext">half price facials</h3>        </div>      </li>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile2.png" width="96%">          <h3 class="tilewrappertext">1/4 off massages</h3>        </div>      </li>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile3.png" width="96%">          <h3 class="tilewrappertext">20/3 off hot rocks</h3>        </div>      </li>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile4.png" width="96%">          <h3 class="tilewrappertext">20/3 off nails</h3>        </div>      </li>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile5.png" width="96%">          <h3 class="tilewrappertext">free use of sauna treatment</h3>        </div>      </li>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile6.png" width="96%">          <h3 class="tilewrappertext">free use of jacuzzi treatment</h3>        </div>      </li>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile7.png" width="96%">          <h3 class="tilewrappertext">1/20 off eyes</h3>        </div>      </li>      <li>        <div id="tilewrapper">          <img id="automargins" src="content/tile8.png" width="96%">          <h3 class="tilewrappertext">1/20 off hair</h3>        </div>      </li>    </ul>  </div>

the text appears when image hovered over.

since li position relative, can add following css rules h3 center vertically within li.: 

position: absolute; top: 50%; transform: translatey(-50%); margin: 0;

example here: http://codepen.io/nicerhugs/details/dmgmev/

the top move top of h3 halfway down li, , transform correct height of li itself. getting rid of margin take away weird mystery space makes appear lower is.


Comments

Post a Comment

Popular posts from this blog

How to check data type in C++? -

-
i'm new c++, i've been using python. i'm trying check type of variable of value stored in objects i'm working on. remember in python there comand isinstance use condition run commands, if next value string, a, , if it's int b. is there way check what's data type on variable in c++? example: in python had array math operation, each character in field [3,"+",2] as read array separate ints strings isinstance command if isinstance(list[0],int): aux1.append(list[0]) list=list[1:] else: if isinstance(lista[0],str): aux2.append(list[0 list=list[1:] now in c++ need similar, time each character in node linked list , again, need separate them, ints in linked list, , strings in linked list what seem struggling c++ statically , (relatively) typed language. discussion each of these terms mean refer this other question , it's explained there better could. first of should sure need...
Read more

javascript - Is getTimezoneOffset() stable during daylight saving transition? -

-
i have date time below conversion logic in javascript converting utc time passed timezone's local time. wondering logic work fine during daylight transition? if not remedy that? can't use third party library. have use pure javascript or angular js. function mytime() { var d1= document.getelementbyid("txtdate").value; var zoffset = document.getelementbyid("txtoffset").value; console.log("date1",d1); var d2 = new date(d1.replace(/ /g,'t')); var d3= d2.gettime()+(d2.gettimezoneoffset()*60000); console.log("date2",d2); console.log("date3",d3); var d4 = new date(d3 + (3600000 * zoffset)); console.log("date3",d3); console.log("date 4",d4); var d5 = d4.tolocaletimestring(); console.log("date 5",d5); ...
Read more

sql server - SQL Query returns one result, does not return 0 or NULL result -

-
i trying query list advisers , provide count of active students each. can list advisers have 1 student, exclude more 1, can not return advisers 0 or null count. select advisors.advisorid, advisors.firstname, advisors.lastname, count(case students.isactive when '1' 1 else null end) "number of students" advisors, students advisors.advisorid=students.advisorid group advisors.advisorid, advisors.firstname, advisors.lastname having count(case students.isactive when '1' 1 else null end)='1' counts active studnets, , returns advisor list advisor 1 student, advisers 0 students come blank. missing? select advisors.advisorid, advisors.firstname, advisors.lastname, count(case students.isactive when '1' 1 else null end) "number of students" advisors, students advisors.advisorid=students.advisorid group advisors.advisorid, advisors.firstname, advisors.lastname having count(case students.isactive when '1' 1 else null end) null ...
Read more