Centré sensible texte

J'ai un jsfiddle ici - http://jsfiddle.net/kw83kLmo/

C'est justs un bloc de texte que j'ai besoin de centre de la fenêtre.

Le texte a besoin d'un ensemble de largeur, parce que je ne veux pas qu'il soit la totalité de la largeur du conteneur.

Lorsque la fenêtre est petite, le texte doit rester dans le centre, mais rétrécissent.

Dans l'exemple ici, il reste centré et répond jusqu'à ce qu'il est à 600px puis reste simplement que la largeur.

Je sais, j'ai mis cette largeur, mais je n'ai qu'à le centre il

<div class="container-fluid ">

    <div class="hero">

        <div class="hero_heading text-center">
            <h1>This is a heading This is a heading This is a heading </h1>
        </div>

    </div>

</div>

Aucune raison d'utiliser le positionnement absolu?

OriginalL'auteur ttmt | 2014-08-22

Modifier votre code comme ceci :

.hero_heading h1{
    border: 1px solid red;
    color: white;
    margin: 0 auto;
    max-width: 600px;
    position: absolute;
    bottom: 0;
}

Démo

OriginalL'auteur throrin19

Modifier votre code

.hero_heading h1{
    border: 1px solid red;
    color: white;
    //top: 0; left: 0; bottom: 0; right: 0;
    width: 600px;/*added*/
    max-width:80%;/*to leave spaces around your text on responsive*/
    margin:auto;/*changed*/
}

Vous n'avez besoin de la position de votre élément pour le faire, sauf si vous avez besoin d'

REMARQUE: Retirez votre position:relative; de .hero

DÉMO

OriginalL'auteur Benjamin

2

Mise à jour de votre h1 style comme ci-dessous.
```
.hero_heading h1 {
    border: 1px solid red;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 600px;
}
```
DÉMO

Vous pourriez partir de la position absolue ainsi dans ce cas. Je l'ai testé mais depuis, ma réponse serait la dessus, je vais juste commenter 🙂

OriginalL'auteur Suresh Ponnukalai

JSfiddle Démo

J'ai pris le positionnement hors de la h1 et le mettre sur l'emballage div.

CSS

.hero{
  background-image: url(http://placehold.it/800x300);  
  background-size: cover;
  position: relative;
  height: 400px;
}

.hero_heading {
    border: 1px solid red;
    color: white;
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    max-width: 600px;
}

OriginalL'auteur Paulie_D

J'irais avec:

.hero_heading{
    border: 1px solid red;
    color: white;
    position: absolute;
    width:50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);        
    transform: translate(-50%, -50%);
}

OriginalL'auteur Tom

CSS flex peut faire de la magie pour vous dans une manière compatible avec la dans la plupart des navigateurs populaires, y compris IE. Jetez un oeil à ce JSFiddle

.hero{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url(http://placehold.it/800x300);  
background-size: cover;
height: 400px;
}
.hero_heading h1{
border: 1px solid red;
color: white;
max-width: 600px;
}

OriginalL'auteur Paullo

Vous devez vous connecter pour publier un commentaire.