Inner Div Text Center in einem Div-Block

Question

Ich arbeite auf der Website Indexseite und mein Code funktioniert gut auf meinem PC. Aber bei 25% innerem Div nach unten. Hier ist Snapshot:

und auf 25% Bildschirm:

wollen, dass es in der Mitte und auch ich verwende position: fixed aber nichts funktioniert. Wie auch immer, ich ändere die Struktur, aber nichts funktioniert.

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

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

Full Code

Answer 1

Sie Probleme wegen absolute Positionierung. Ich habe die folgenden Stile

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

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

Durch die Einstellung width:100% und text-align: center Ihre Elemente werden in mehreren Größen zentrieren. Auf 25% gezoomt und auf Chrom getestet.

Working fiddle here

By the way, können Sie auch einstellen width:50% auf Innenkörper, Ihre Website Ansprechbarkeit zu verbessern.

Answer 2

können Sie nutzen die Flexbox und etwas tun, wie folgt aus:

/* basic CSS browser reset, recommended */ 
 
* {padding:0;box-sizing:border-box} 
 
html, body {width:100%;height:100vh;margin:0} /* notice height: 100vh (100% of the viewport height) */ 
 

 
body { /* or any other parent container/wrapper of both divs */ 
 
    display: flex; /* displays children inline by default that's why we need to change its direction */ 
 
    flex-direction: column; /* now it stacks children vertically */ 
 
    justify-content: center; /* vertical alignment/centering/by default its horizontal but since the flex-direction is changed so is this */ 
 
    align-items: center; /* horizontal alignment/centering/same here, by default its vertical */ 
 
} 
 

 
/* 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 its 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>