Zentrierung div in einem Hintergrundbild Div

Ich habe ein Div, das ein Bild, das mit dem Browser strecken wird. Ich habe ein Div, das ein Logo ist, wenn das Wrapper-Div (Bild) geschrumpft ist, sollte das Div zentriert bleiben, aber es ist auf einer Seite. Ich benutzte links: 42%; zum Zentrum. Es ist in Ordnung, wenn groß, nur wenn Sie schrumpfen, es geht auf die eine Seite ..Zentrierung div in einem Hintergrundbild Div

Habe ich noch andere Optionen als links: 42% ;? Rand: 0 automatisch; hat nicht funktioniert ...

@font-face { 
 
    font-family: myFirstFont; 
 
    src: url(jewler/Allura-Regular.otf); 
 
} 
 
body { 
 
\t b111ackground-color: #000000; 
 
} 
 

 
h1 { 
 
    color: maroon; 
 
    margin-left: 40px; 
 
} 
 
    h2 { 
 
    color: maroon; 
 
    margin-left: 40px; 
 
} 
 
h3 { 
 
    color: maroon; 
 
    margin-left: 40px; 
 
} 
 

 
#wrapper{ 
 
\t width:80%; 
 
\t height:80%; 
 
    margin: 0 auto; 
 
\t ; 
 
\t } 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#logo{ 
 
\t 
 
margin: 0 auto; 
 
border: px solid green; 
 
color:#FFF; 
 
position:absolute; 
 
margin-left:10px; 
 
margin-top:10px; 
 
display:table; 
 
width:21%; 
 

 
max-width:250px; 
 
height:122px; 
 
top:0%; 
 
left:42%; 
 

 
} 
 

 

 
#info{ 
 
\t margin: 0 auto; 
 
\t border: 1px solid green; 
 
color:#FFF; 
 
display:table; 
 
width:250px; 
 
height:250px; 
 
border: 1px solid red; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title> | Coming Soon!</title> 
 

 

 

 

 
</head> 
 

 
<body> 
 
<div id="wrapper"> 
 
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/> 
 

 

 
<div id="logo"> 
 
<IMG SRC="jewler/logo.png" width="100%" height="100%"/> 
 
</div> 
 

 

 

 

 

 
<div id="info"> 
 
Coming Soon 
 
Adress: 
 
Phone: 
 
E-mail: 
 
</div> 
 

 

 

 

 

 
</div> 
 

 

 

 
</body> 
 
</html>

Quelle

2017-06-08 user3174196

Ich würde gehen Sie nach links: '50%;' und 'margin-left' "- die Hälfte der div Größe" IE, wenn die' div' war '100px' Ich würde machen' Rand links: -50px; ' – Zak

Verwenden left: 50% mit transform: translateX(-50%) horizontal ein absolut positioniertes Element zu zentrieren. Entferne auch den linken Rand, damit er richtig zentriert ist.

@font-face { 
 
    font-family: myFirstFont; 
 
    src: url(jewler/Allura-Regular.otf); 
 
} 
 
body { 
 
\t b111ackground-color: #000000; 
 
} 
 

 
h1 { 
 
    color: maroon; 
 
    margin-left: 40px; 
 
} 
 
    h2 { 
 
    color: maroon; 
 
    margin-left: 40px; 
 
} 
 
h3 { 
 
    color: maroon; 
 
    margin-left: 40px; 
 
} 
 

 
#wrapper{ 
 
\t width:80%; 
 
\t height:80%; 
 
    margin: 0 auto; 
 
\t ; 
 
\t } 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#logo{ 
 
\t 
 
margin: 0 auto; 
 
border: px solid green; 
 
color:#FFF; 
 
position:absolute; 
 
/* margin-left:10px; */ 
 
margin-top:10px; 
 
display:table; 
 
width:21%; 
 

 
max-width:250px; 
 
height:122px; 
 
top:0%; 
 
left:50%; 
 
transform: translateX(-50%); 
 

 
} 
 

 

 
#info{ 
 
\t margin: 0 auto; 
 
\t border: 1px solid green; 
 
color:#FFF; 
 
display:table; 
 
width:250px; 
 
height:250px; 
 
border: 1px solid red; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title> | Coming Soon!</title> 
 

 

 

 

 
</head> 
 

 
<body> 
 
<div id="wrapper"> 
 
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/> 
 

 

 
<div id="logo"> 
 
<IMG SRC="jewler/logo.png" width="100%" height="100%"/> 
 
</div> 
 

 

 

 

 

 
<div id="info"> 
 
Coming Soon 
 
Adress: 
 
Phone: 
 
E-mail: 
 
</div> 
 

 

 

 

 

 
</div> 
 

 

 

 
</body> 
 
</html>

Quelle

2017-06-08 18:03:36

Zentrierung div in einem Hintergrundbild Div

Antwort

Verwandte Themen