Vertical aligner à l'aide de transformer: translateY(-50%); à l'intérieur en position absolue div
Je suis en train de la verticale), le centre de h2 à l'intérieur d'un div qui est en position absolue avec une hauteur de 50% en utilisant le code suivant:
#owl-demo h2 {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Fonctionne très bien sur Chrome, mais le h2 disparaît dans Safari IOS à moins que j'ai régler le h2 être en position absolue et puis je ne peux pas le centre le texte avec text-align.
Toute aide beaucoup apprécié, j'ai essayé de faire ce travail toute la journée.
Edit: de Sorte qu'il ressemble à la hauteur de 50% est le problème de la div parent, si je le supprime le texte s'affiche dans IOS.
Je suis en train de réaliser une superposition qui couvre 50% de la hauteur de la vignette est-il une autre façon de l'obtenir pour couvrir 50% de la vignette?
#owl-demo .thumb-overlay {
text-align: center;
height: 50%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background:rgba(0, 0, 0, .8);
z-index: 9999;
opacity:0;
filter: alpha(opacity = 0);
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#owl-demo .thumb-overlay:hover {
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
.touch #owl-demo .thumb-overlay, {
opacity:1;
filter: alpha(opacity = 1);
}
#owl-demo h2 {
font-size: .875em;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: $white;
}
- Jsfiddle veuillez
- HTML et CSS: jsfiddle.net/5cn5s dirait que c'est la hauteur qui est à l'origine du problème de recherche d'une autre façon de définir la hauteur de la superposition de 50%, des idées? jsfiddle.net/5cn5s
- que le violon n'est pas bon.. donner un autre sans PHP à l'intérieur du HTML
- Désolé, ici vous allez: jsfiddle.net/5cn5s/10
- -webkit-transform: translateY(-50%); il fixe pour moi, merci pour cette
Vous devez vous connecter pour publier un commentaire.
Suivantes travaille pour moi dans safari (5.1.7)
JSFiddle
Comme pour les autres moyens, puisque vous pouvez faire usage de
::before
pseudo-élément pour l'alignement :}
cochez cette JSFiddle
<h2>
qui est un élément de bloc pour les navigateurs qui s'appliquent margin, padding etc ... donc la taille réelle du bloc ne sera pas ce que vous attendez.. si vous utilisez un<span>
<p>
et style, il sera beaucoup plus facile. en plus de la question a été abt résoudre le problème dans safari, vous n'avez jamais rien dit à propos de multilines.. 😉J'ai trouvé une solution aujourd'hui pour résoudre ce problème avec le navigateur safari mobile & mobile de chrome.
Utiliser le même code que vous avez déjà pour le CSS h2 dans votre exemple, à l'exception de placer vertical-align:top;
Cela semble résoudre le translateY sur le navigateur Safari mobile. J'espère que cela aide quelqu'un!
Préfixes devrait faire l'affaire: