zawsze wyśrodkowanie w pionie

pytanie zadane 14 marca 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

Witam, chciałbym żeby mój napis był zawsze na środku.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="para.js" type="text/javascript"></script>
    
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300&subset=latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="module-hero bg-1">
        <div class="pojemnik-napis">
            <h1 class="text-center">FIRMA IS ALL YOU NEED</h1>
            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat illo rerum suscipit neque, voluptatum, neque, voluptatum.</p>
        </div>
    </div>
</body>
</html>


body
{
    font-family: 'Lato', sans-serif;
}

.module-hero {
	position: relative;
	background-repeat: no-repeat;
    background-image: url('aa.jpg');
	width: 100%; 
    height: 100vh;
    background-size: cover;
}
.pojemnik-napis
{
    color: #fff;
    width: 600px;
    margin: auto;
}

.pojemnik-napis>h1
{
    font-size: 50px;
    font-weight: 900;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
}

h1,p
{
    margin:0;
    padding: 0;
}

.pojemnik-napis>p
{
    font-size: 19px;
    font-weight: 300;
    margin-top: 10px;
}

5 odpowiedzi

odpowiedź 14 marca 2016 przez Ivan Maniak (60,650 p.)

Najłatwiej zrobić to przez użycie flexboxa.
Jak to zrobić? Na początku musisz sobie przygotować stronę do bycia na całą wysokość. Robisz to dodając do html oraz body height: 100%.

html, body{
  height: 100%
}

Teraz musisz zamknąć te napisy w jednym pojemniku. W tym przypadku będzie to .pojemnik-napis. Dodaj do niego takie właściwości:

.pojemnik-napis{
  height: 100%; // To co ma być w pojemniku ma znajdować się na środku, więc nasz pojemnik musi mieć 100% wysokości okna
  display: flex; // Musimy zadeklarować, że będziemy korzystać z flexboxa
  justify-content: center; // Wyrównujemy wszystkie elementy, które są w śrdoku diva do środka :) [Poziomo]
  align-items: center; // Wyrównujemy wszystkie elementy, które są w śrdoku diva do środka :)[Pionowo]
}

Teraz wszystkie elementy, które będą znajdywały się w środku, będą wyśrodkowane.
Po dodaniu dwóch napisów zauważysz "dziwne zachowanie" się napisów. Aby to naprawić poczytaj więcej o flexbox. Dokładnie chodzi mi o flex-direction oraz flex-flow.
Potrzebne Ci informacje znajdziesz tutaj: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

odpowiedź 14 marca 2016 przez Eryk Andrzejewski Mędrzec (164,260 p.)

Może spróbuj z vertical-align?

komentarz 14 marca 2016 przez Dynamic Bywalec (2,910 p.)

jak dokładnie

odpowiedź 14 marca 2016 przez artimal Gaduła (4,800 p.)

Ustal sobie line-height: <wysokość diva>;

komentarz 14 marca 2016 przez Dynamic Bywalec (2,910 p.)

próbowałem, ustawia mi wtedy dla h1 i p razem i się rozciąga

2	komentarz 14 marca 2016 przez artimal Gaduła (4,800 p.) Przede wszystkim to powiedz o jaki efekt ci chodzi, bo opisałeś problem na odpierdziel. https://jsfiddle.net/dko3ydvu/

komentarz 14 marca 2016 przez Dynamic Bywalec (2,910 p.)

a czego nie rozumiesz w zdaniu: chciałbym żeby mój napis był zawsze na środku.

komentarz 14 marca 2016 przez artimal Gaduła (4,800 p.)

Po pierwsze chcesz by jakiś text był środkowany wewnątrz diva, jeśli tak to jaki to div?
Jeśli nie, to zapewne chcesz środkować jakiegoś diva pionowo w innym divie.

komentarz 14 marca 2016 przez Dynamic Bywalec (2,910 p.)

chciałbym wyśrodkować diva w divie tudzież text w divie, ale chcę również żeby zajmował całą wysokość strony i skalował się wraz z szerokością (ten wię\kszy div}

odpowiedź 14 marca 2016 przez saliwan22 Gaduła (3,110 p.)

Możesz też spróbować w ten sposób:

<div id="box">
<div id="center-text">
TUTAJ TWÓJ TEKST
</div>
</div>

#box
{
width: określona szerokość;
height: określona wysokość;
}

#centertext
{
margin: auto;
}

komentarz 14 marca 2016 przez Dynamic Bywalec (2,910 p.)

nie zadziała bo chcę żeby div się skalował

komentarz 14 marca 2016 przez saliwan22 Gaduła (3,110 p.)

Nie widzę problemu... Ten zewnętrzny niech się skaluje a ten w środku niech cały czas będzie się środkował...

komentarz 14 marca 2016 przez Dynamic Bywalec (2,910 p.)

body
{
    margin:0;
}
.box
{
    width: 100%;
    height: 100vh;
    background-color: red;
}

h1, p
{
    margin: 0;
    padding: 0;
}

.center-text
{
    height: 100px;
    margin: auto;
    width: 300px;
    background-color: orange;
}

    <div class="box">
        <div class="center-text">
            <h1>Witam Cie</h1>
            <p>Witam Cie</p>
        </div>
    </div>

komentarz 14 marca 2016 przez saliwan22 Gaduła (3,110 p.)

Mój błąd ustaw na sztywno szerokość w divie z tektem.

odpowiedź 14 marca 2016 przez jpacanowski VIP (101,940 p.)

Podobne pytania

0 głosów

4 odpowiedzi 260 wizyt

Wyśrodkowanie w pionie działa tylko w jednym elemencie.

pytanie zadane 24 października 2015 w HTML i CSS przez Jordi Początkujący (290 p.)

+1 głos

1 odpowiedź 526 wizyt

Skalowanie obrazu w pionie

pytanie zadane 15 marca 2016 w HTML i CSS przez Bakr Mądrala (6,850 p.)

0 głosów

5 odpowiedzi 818 wizyt

Wyśrodkowanie diva z tekstem w innym divie

pytanie zadane 16 października 2016 w HTML i CSS przez Avenue Użytkownik (940 p.)

zawsze wyśrodkowanie w pionie

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

5 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci