Inner div text center inside a div block

Question

I am working on website index page and my code is working fine on my pc. But on 25% inner div moving down . Here is snapshot:

and on 25% screen:

want it on the center and even i use position: fixed but nothing works. However i change structure but nothing work.

.txg{
     position: absolute;
        top: 40%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    .homelogo {
     text-align: center;
     line-height: 1em;
     font-family: helvetica, arial, sans-serif;
     font-weight: bold;
     background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 50px;
    }
    .teg{
     position: absolute;
        top: 50%;
        left: 48%;
        -moz-transform: translateX(-50%) translateY(-48%);
        -webkit-transform: translateX(-50%) translateY(-48%);
        transform: translateX(-50%) translateY(-48%);
    }
    .teg ul{
     list-style: none;
    }
    .teg li{
     display: inline-block;
     background-color: #07ABD8;
     padding:15px;
     border-radius: 8px;
     font-size: 15px;
     text-transform: uppercase;
     font-family: helvetica, arial, sans-serif;
    }
    .teg li a{
     text-decoration: none;
     color: white;
    }

<div class="txg">
        <a class="homelogo logo" href="#">WebSiteName</a>
       </div>
       <div class="teg">
        <ul>
         <li><a href="#">New</a></li>
         <li><a href="#">Top</a></li>
         <li><a href="#">Hd</a></li>
         <li><a href="#">Upcoming</a></li>
        </ul>
       </div>

Full Code

Jonathan Chaplin · Accepted Answer · 2017-12-21T18:52:46.377

You're having problems because of absolute positioning. I changed the following styles

    .txg{
display: inline-block;
text-align: center;
width:100%;
margin-top:10%;
    }

    .teg{
display: inline-block;
text-align: center;
width:100%
    }

By setting width:100% and text-align: center your elements will center at multiple sizes. Zoomed in to 25% and tested on chrome.

Working fiddle here

By the way, you might consider setting width:50% on innerbody as well to improve your site's responsiveness.

VXp · Answer 2 · 2018-09-06T13:23:14.923

You can do it with the Flexbox:

* {padding: 0; box-sizing: border-box}
body {height: 100vh; margin: 0} /* notice "height: 100vh" (i.e. 100% of the viewport height) */

body { /* or any other parent element of both divs */
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  justify-content: center; /* vertical alignment / it's horizontal by default, but since the flex-direction is changed, so is this */
  align-items: center; /* horizontal alignment / same here, it's vertical by default */
}

/* not necessary
.txg {
  position: absolute;
  top: 40%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
*/

.txg {
  margin-bottom: 10px; /* a little bit of vertical gap */
}

.homelogo {
  /*text-align: center; not necessary since it's already centered */
  line-height: 1em;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 50px;
}

/* not necessary
.teg {
  position: absolute;
  top: 50%;
  left: 48%;
  -moz-transform: translateX(-50%) translateY(-48%);
  -webkit-transform: translateX(-50%) translateY(-48%);
  transform: translateX(-50%) translateY(-48%);
}
*/

.teg ul {
  display: flex; /* added */
  list-style: none;
}

.teg ul li a { /* added anchor tag to increase clickable area, recommended */
  /*display: inline-block;*/
  margin: 0 5px; /* added */
  background-color: #07ABD8;
  padding: 15px;
  border-radius: 8px;
  font-size: 15px;
  text-transform: uppercase;
  font-family: helvetica, arial, sans-serif;
  text-decoration: none;
  color: white;
}

<div class="txg">
  <a class="homelogo logo" href="#">WebSiteName</a>
</div>
<div class="teg">
  <ul>
    <li><a href="#">New</a></li>
    <li><a href="#">Top</a></li>
    <li><a href="#">Hd</a></li>
    <li><a href="#">Upcoming</a></li>
  </ul>
</div>

Inner div text center inside a div block

2 Answers2