Zentrierter Text unabhängig von der Anzahl der Zeilen

Ist es möglich, ein CSS-System zu erstellen, das es einem Absatz ermöglicht, auf einer Seite unabhängig von der Fensterbreite zu zentrieren? Das heißt, wenn Sie das Fenster verkleinern und die Anzahl oder Linien erhöhen, wird es automatisch so angepasst, dass es immer noch auf der Seite zentriert ist.Zentrierter Text unabhängig von der Anzahl der Zeilen

Hier ist ein demo

Und hier ist das bestehende System:

.container { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 50%; 
    height: 10em; 
    background: #fafafa; 
} 

.title { 
font-size: 1.5em; 
font-weight: 400; 
margin: 0 0 2rem 0; 
} 

.paragraph { 
font-size: 1em; 
font-weight: 100; 
text-align: justify; 
line-height: 1.5rem; 
}

Danke :)

Quelle

2017-02-07 meow-meow-meow

Was ist das Problem mit der aktuellen Demo verwenden kann? Es scheint für mich zu funktionieren. Das Einzige ist, dass es auf der Seite etwas zu hoch erscheint, aber dies kann mit einfacher Positionierung angepasst werden. –

Dies ist eine gute Referenz für das Zentrieren Dinge https://www.w3.org/Style/Examples/007/center.en.html

Sie top: 50%; left: 50%; transform: translate(-50%,-50%); verwenden können, um stelle etwas in die Mitte.

body { 
 
    font-family: sans-serif; 
 
    color: #9ab; 
 
    background: #fff; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 50%; 
 
    background: #fafafa; 
 
} 
 
.title { 
 
    font-size: 1.5em; 
 
    font-weight: 400; 
 
    margin: 0 0 2rem 0; 
 
} 
 
.paragraph { 
 
    font-size: 1em; 
 
    font-weight: 100; 
 
    text-align: justify; 
 
    line-height: 1.5rem; 
 
}

<div class="container"> 
 
    <div class="title">TITLE</div> 
 
    <div class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas, voluptatibus in accusamus alias voluptatem facilis omnis saepe laudantium, dolorem, nobis modi ratione est doloremque hic enim beatae fugit sapiente!</div> 
 
</div>

Sie auch Flexbox mit align-items: center; justify-content: center;

body { 
 
    font-family: sans-serif; 
 
    color: #9ab; 
 
    background: #fff; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 

 
.container { 
 
    width: 50%; 
 
    background: #fafafa; 
 
} 
 
.title { 
 
    font-size: 1.5em; 
 
    font-weight: 400; 
 
    margin: 0 0 2rem 0; 
 
} 
 
.paragraph { 
 
    font-size: 1em; 
 
    font-weight: 100; 
 
    text-align: justify; 
 
    line-height: 1.5rem; 
 
}

<div class="container"> 
 
    <div class="title">TITLE</div> 
 
    <div class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas, voluptatibus in accusamus alias voluptatem facilis omnis saepe laudantium, dolorem, nobis modi ratione est doloremque hic enim beatae fugit sapiente!</div> 
 
</div>

Quelle

2017-02-07 02:35:03

das ist perfekt, danke :) –

@kathrynm genial, du bist willkommen. –

Zentrierter Text unabhängig von der Anzahl der Zeilen

Antwort

Verwandte Themen