Zentriert responsive text

Habe ich ein jsfiddle hier - http://jsfiddle.net/kw83kLmo/

Es ist justs einen block von text, den ich brauche, um Mitte in die Fenster.

Den text braucht eine Breite festlegen, weil ich nicht wollen, es zu sein, die volle Breite des Containers ein.

Wenn das Fenster kleiner wird der text muß bleiben in der Mitte aber schmaler.

In dem Beispiel hier zentriert wird und reagiert, bis es auf 600px, dann bleibt die Breite.

Ich weiß, ich habe eingestellt, dass die Breite, aber ich habe, um es

<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>

Jeder Grund für die Verwendung von absoluter Positionierung?

InformationsquelleAutor ttmt | 2014-08-22

Bearbeiten Sie Ihren code wie folgt :

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

Demo

InformationsquelleAutor throrin19

Bearbeiten, die auf Ihrem 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*/
}

Die Sie nicht brauchen, um Ihre position element für die Herstellung, es sei denn, wenn Sie brauchen,

HINWEIS: Entfernen Sie Ihre position:relative; aus .hero

DEMO

InformationsquelleAutor Benjamin

2

Aktualisieren Sie Ihre h1 Stil wie unten.
```
.hero_heading h1 {
    border: 1px solid red;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 600px;
}
```
DEMO

Sie verlassen konnte, der die position absolut, wie auch in diesem Fall. Getestet habe ich es aber da meine Antwort wäre die oben genannten, werde ich nur einen Kommentar 🙂

InformationsquelleAutor Suresh Ponnukalai

JSfiddle Demo

Nahm ich die Positionierung aus der h1 und legen Sie es auf der Verpackung 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;
}

InformationsquelleAutor Paulie_D

Ich würde gehen mit:

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

InformationsquelleAutor Tom

CSS-flex kann die Magie für Sie in einer kompatiblen Art und Weise auf den meisten gängigen Browsern, einschließlich IE. Werfen Sie einen Blick auf diese 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;
}

InformationsquelleAutor Paullo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.