Bootstrap 4 problem z wyśrodkowaniem contentu

0

Witam

Chciałem na próbę zrobić stronę w Bootstrapie 4 ale mam problem z wypośrodkowaniem elementów

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-grid.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>Test</title>
</head>
<body>
<section id="header">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
            <img src="./images/header.jpeg" class="img-fluid" >

                <h1> To chciałbym</h1>
                <h2>Aby było na środku</h2>
            </div>

        </div>
    </div>

</section>



<script src="./js/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
</body>
</html>

Obrazek, h1, h2 są z lewej strony i nie mam pojęcia dlaczego, dopiero przy zmniejszaniu obrazu jest tak jak być powinno.

0

użyj do elementów text-align: center;

0

przecież to masz w dokumentacji justify-content-center albo align-self-center

0
czysteskarpety napisał(a):

przecież to masz w dokumentacji justify-content-center albo align-self-center

Próbowałem i nie działa

<section id="header">

        <div class="container">

            <div class="row">

                <div class="col-sm-12 col-lg-12">
                    <div class="justify-content-center">
                    <img src="./images/header.jpeg" class="img-fluid">

                    <h1> To chciałbym</h1>
                    <h2>Aby było na środku</h2>
                </div>
            </div>
        </div>
        </div>

</section>
0

bo źle klasę dodałeś, powinieneś dodać do diva wyżej, albo bezpośrednio do textu czy obrazka... :/

0

Dokumentacje właśnie czytałem i próbowałem dodawać bezpośrednio przed diva container, przed diva row i po row i nigdzie nie działało.

        <div class="container">

            <div class="row">

                <div class="col-sm-12 col-lg-12">
                    <img src="./images/header.jpeg" class="img-fluid justify-content-center">

                    <h1 class="justify-content-center"> To chciałbym</h1>
                    <h2>Aby było na środku</h2>
                </div>
            </div>
        </div>
        </div>

Dodawanie do elementu też nie pomaga.... Jedynie pomysł Mjuzik zadziałał. Nie wiem co jest nie tak.

0 
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-6">
                    <img  src="./images/header.jpeg" class="img-fluid ">
                    <h1> To chciałbym</h1>
                    <h2>Aby było na środku</h2>
                </div>
            </div>
        </div>

jak chcesz centrować same elementy to robisz text-center np.

<h2 class="text-center">Aby było na środku</h2>

jest jeszcze opcja z mx-auto ale to sam sobie sprawdź...

0
czysteskarpety napisał(a):
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-6">
                    <img  src="./images/header.jpeg" class="img-fluid ">
                    <h1> To chciałbym</h1>
                    <h2>Aby było na środku</h2>
                </div>
            </div>
        </div>

jak chcesz centrować same elementy to robisz text-center np.

<h2 class="text-center">Aby było na środku</h2>

jest jeszcze opcja z mx-auto ale to sam sobie sprawdź...

Do h1,h2 text center zadziałał. Do obrazka nie chce działać ani text-center ani justify-content-center

     <div class="container">

            <div class="row justify-content-center">

                <div class="col-sm-12 col-lg-12">
                    <img src="./images/header.jpeg" class="img-fluid">

                    <h1 class="text-center"> To chciałbym</h1>
                    <h2 class="text-center">Aby było na środku</h2>
                </div>
            </div>
        </div>
        </div>

Może jakaś biblioteka nie jest załadowana?

0

Imo braki sa w podstawach CSS, albo angielskim bo Bootsrap działa prawidłowo nie środkując Ci obrazka w ostatnim poscie.

Wiesz co w ogóle robią klasy justify-content-* i text-center?
Tam środkujesz kolumnę, a h1 i h2 jest rozciągnięte na całą jej szerokośc, więc justyfy-content przy col-12 zupełnie nic tu nie wnosi. Sam tekst jest wyśrodkowany zgodnie z text-align:center z klasy text-center.

Zajrzyj w devtoolsy jak coś nie działa, tam zawsze wszystko jest ładnie rozpisane.

Co do środkowania samych obrazków-> #aligin-images

0
LynxBings napisał(a):
czysteskarpety napisał(a):

Do h1,h2 text center zadziałał. Do obrazka nie chce działać ani text-center ani justify-content-center

musi działać, sprawdzałem na BS4 u siebie...

1 użytkowników online, w tym zalogowanych: 0, gości: 1